jquery - Angularjs用标签绑定数据并传入表单

Question

我正在尝试将输入数据与标签标签绑定，并在发布方法中使用相同的 ng-model，但是当我尝试传递标签的发布方法时，一次只有一件事有效。由于我面临删除具有奇怪 uId 的项目的问题

--查看代码--

<div class="row">
    <div ng-app="learning" ng-controller="LearnController">
        <br />  
        <form  method="post" ng-submit="submitStudnetForm()">
            <label>Your ID: {{uId}}</label>
            <input class="form-control " type="text" ng-model="uId" name="CustomerId" />

            <label>Your Name: {{uName}}</label>
            <input type="text" ng-model="uName" class="form-control " name="Name" />

            <label>Your Country: {{uCountry}}</label>
            <input type="text" ng-model="uCountry" class="form-control " name="Country"/>

            <input type="submit" value="Create" />
            <a href="~/Home/Delete/{{uId}}" class="btn btn-danger">Delete</a>
        </form>
    </div>
</div>

- 脚本 -

//1. create app module
var studentApp = angular.module('learning', []);

//2. create controller
studentApp.controller("LearnController", function ($scope, $http) {

    //3. attach originalStudent model object
    $scope.originalStudent = {
        CustomerId: uId,
        Name: uName,
        Country: uCountry,           
    };

    //4. copy originalStudent to student. student will be bind to a form
    $scope.student = angular.copy($scope.originalStudent);

    //5. create submitStudentForm() function. This will be called when user submits the form
    $scope.submitStudnetForm = function () {
        var onSuccess = function (data, status, headers, config) {
            alert('Student saved successfully.');
        };
        var onError = function (data, status, headers, config) {
            alert('Error occured.');
        }
        console.log($scope.student)
        $http.post('/Home/Index', { customer:$scope.student })
            .success(onSuccess)
            .error(onError);
    };

    //6. create resetForm() function. This will be called on Reset button click.
    $scope.resetForm = function () {
        $scope.student = angular.copy($scope.OriginalStudent);
    };
});

标签： jqueryhtmlangularjsangularjs-material

Answer 1

它们是范围变量-

用下面的代码替换你的代码段

$scope.originalStudent = {
                CustomerId: $scope.uId,
                Name: $scope.uName,
                Country: $scope.uCountry,

            };

正如评论中所建议的，用于输入的 ng-model 应该是student.uId, student.uName, student.uCountry

更新的 HTML 代码 -

<div class="row">
    <div ng-app="learning" ng-controller="LearnController">
        <br />  
        <form  method="post" ng-submit="submitStudnetForm()">
            <label>Your ID: {{student.uId}}</label>
            <input class="form-control " type="text" ng-model="student.uId" name="CustomerId" />

            <label>Your Name: {{student.uName}}</label>
            <input type="text" ng-model="student.uName" class="form-control " name="Name" />

            <label>Your Country: {{student.uCountry}}</label>
            <input type="text" ng-model="student.uCountry" class="form-control " name="Country"/>

            <input type="submit" value="Create" />
            <a href="~/Home/Delete/{{student.uId}}" class="btn btn-danger">Delete</a>
        </form>
    </div>
</div>