AngularJS单选按钮未绑定到模型

Question

在使用 AngularJS 时，我遇到了将单选按钮绑定到 MVC 模型的问题，所有其他字段都成功绑定到 MVC 模型，但单选按钮没有绑定。请告知我在哪里弄乱了电线。

HTML

<tr ng-repeat="item in experienceModel">
                <td><input type="text" name="StartDate" ng-model="item.StartDate | date:'dd-MM-yyyy'" id="date_teachingStart{{$index}}"/></td>
                <td><input type="text" name="EndDate" ng-model="item.EndDate | date:'dd-MM-yyyy'" id="date_teachingEnd{{$index}}"/></td>
                <td><input type="text" name="SubjectArea" ng-model="item.SubjectArea"/></td>
                <td><input type="text" name="Position" ng-model="item.Position"/></td>
                <td><input type="text" name="Institution" ng-model="item.Institution"/></td>
                <td><input type="text" name="City" ng-model="item.City"/></td>
                <td><input type="text" name="Country" ng-model="item.Country"/></td>
                <td class="centerAlign"><input type="radio" name="item.IsCurrent" value="{{$index}}" ng-model="selected.item" id="radio_experience[{{$index}}]" /></td>                    
                <td><a class="removeRow" title="Delete item" href="" ng-click="removeRow()"></a></td>
                <td><input type="hidden" name="CVId" ng-model="item.CVID" /></td>
                <td><input type="hidden" name="ExperienceID" ng-model="item.ExperienceID" /></td>
            </tr>

脚本

 var experienceModel = <%: Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model.TeachingExperience)) %>
     app.value("experienceModel", experienceModel);

角度控制器

 app.controller('TeachingController', ['$scope', 'experienceModel',
function ($scope, experienceModel) {

        $scope.counter = 0;            

        $scope.selected = {};

        $scope.experienceModel = experienceModel;

        // Set the selected value to reflect initial data 
        $scope.experienceModel.forEach(function (item, index) {
            if (item.IsCurrent) {
                $scope.selected.item = index;
            }
        });

        if ($scope.experienceModel == null) {
            $scope.experienceModel = [{ 'ExperienceID': '', 'CVID': '', 'ExperienceCategoryId': '', 'StartDate': '', 'EndDate': '', 'SubjectArea': '', 'NoOfDays': '', 'Position': '', 'Programme': '', 'KnowledgeArea': '', 'Institution': '', 'Client': '', 'City': '', 'Country': '', 'IsCurrent': '' }];
        }

        if ($scope.experienceModel.length == 0) {
            $scope.experienceModel.push({ 'ExperienceID': '', 'CVID': '', 'ExperienceCategoryId': '', 'StartDate': '', 'EndDate': '', 'SubjectArea': '', 'NoOfDays': '', 'Position': '', 'Programme': '', 'KnowledgeArea': '', 'Institution': '', 'Client': '', 'City': '', 'Country': '', 'IsCurrent': '' });
        }

        $scope.$watch('selected.item', function (index) {
            $scope.items.forEach(function (item, i) {
                item.isCurrent = i === parseInt(index);
            });
        });

        $scope.counter = 1;

    $scope.addRow = function () {
        $scope.experienceModel.push({ 'ExperienceID': '', 'CVID': '', 'ExperienceCategoryId': '', 'StartDate': '', 'EndDate': '', 'SubjectArea': '', 'NoOfDays': '', 'Position': '', 'Programme': '', 'KnowledgeArea': '', 'Institution': '', 'Client': '', 'City': '', 'Country': '', 'IsCurrent': '' });
        $scope.counter++;
    }
    $scope.removeRow = function () {
        var row = $(this);
        $scope.experienceModel.splice(row[0].$index, 1);
        $scope.counter--;
    }
}]);

Answer 1

在 AngularJS 中负责双向数据绑定的“事物”是ng-model。您应该在希望用户与之交互的所有表单字段上设置此属性。

它会为您设置字段的值，可以这么说 - 所以应该删除 value 属性。您可以使用 ng-model 或 value 但如果您决定只设置该值（在某些情况下这是有意义的，例如 readonly 字段），它将仅在一个方向上绑定- 它会对模型的变化做出反应，但不能改变模型。

好的，经过这个理论介绍，这里有一个可能的解决方案：

angular.module('app', [])
  .controller('ctrl', function($scope) {

    // Sample data
    $scope.items = [
      {name: 'First', isCurrent: false},
      {name: 'Second', isCurrent: false},
      {name: 'Third', isCurrent: false},
      {name: 'Fourth', isCurrent: false}
    ];

    /* Object to track selected things. (It's better to use objects
     * rather than plain variables to avoid problems with variable's scope) */
    $scope.selected = {};

    // Set the selected value to reflect initial data 
    $scope.items.forEach(function(item, index) {
      if (item.isCurrent) {
        $scope.selected.item = index;
      }
    });

    /* If selected item changes, set corresponding item's 
     * isCurrent property to true and all others to false */
    $scope.$watch('selected.item', function(index) {
      $scope.items.forEach(function(item, i) {
        item.isCurrent = i === parseInt(index);
      });
    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="item in items">
      {{ item.name }}
      <label>
        <input type="radio" ng-model="selected.item" value="{{ $index }}">current
      </label>
    </li>
  </ul>
  <pre>{{ items | json }}</pre>
</body>

好的，所以在合并这个和我们在 cmets 中阐明的内容之后，您的 html 代码应该如下所示：

<!-- (...) -->
<td><input type="text" name="city" ng-model="item.City" /></td>
<td><input type="text" name="country" ng-model="item.Country" /></td>
<td class="centerAlign"><input type="radio" ng-model="selected.item" /></td>
<td><a class="removeRow" title="Delete item" href="" ng-click="removeRow($index)"></a></td>
<!-- (...) -->

注意一些“奖励”改进：

• 在使用 AngularJS 时，您不需要使用 href="javascript:void(0)"。 href="" 就足够了 (https://docs.angularjs.org/api/ng/directive/a)
• 删除一行时，最简单的方法是只需将迭代的$index 传递给您的removeRow() 函数
• 如果您不使用 Angular 的验证，则不需要 name 属性
• 如果您不使用标签（尤其是<label for="sth">），您将不需要id 属性