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

Posted 2023-05-09

【中文标题】Angularjs用标签绑定数据并传入表单

【英文标题】：Angularjs Bind Data with label and Passing in Form

【发布时间】：2020-05-14 14:39:15

【问题描述】：

我正在尝试将输入数据与标签标签绑定，并在发布方法中使用相同的 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);
    ;
);

【问题讨论】：

看看你的控制器，不应该是ng-model="student.uId"、ng-model="student.uName"和ng-model="student.uCountry"吗？

使用这些 ng-model 结果是一样的，一旦我在方法中使用它就不能正常工作。

【参考方案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>

【讨论】：

他也没有将属性绑定到视图中的$scope.student 对象