在AngularJS中，如何取消选中单选按钮以使所有对象变为false

In AngularJS how to uncheck a radio button to make all objects become false

本文关键字：false 单选按钮 对象 AngularJS 何取消 取消      更新时间：2023-09-26

我有一个数组，里面有很多"contact"对象。只有一个联系人可以是主要联系人（主要联系人：true）。

我还有一个单选按钮，可以选择哪个联系人是主要联系人。

Q： 如何使一个联系人成为主要联系人并停用所有其他联系人（主要联系人：false）？那么只有一个对象具有属性（primary:true），其余的为false？

我的例子：http://plnkr.co/edit/Y3as4SXv2ZGQSF39W8O6?p=preview

.controller('ExampleController', ['$scope',
        function($scope) {
        $scope.addContList = [
            {
                email: "q@q.com",
                jobTitle: "clerk",
                name: "nico2",
                phone: "1",
                primary: true
            },
            {
                email: "a@a.com",
                jobTitle: "director",
                name: "david",
                phone: "1",
                primary: false
            }
        ];
          $scope.$watch('addContList', function() {
            console.log('changed', JSON.stringify($scope.addContList, null, 2))
          }, true)
        }
      ]);

这是的视图

<tr ng-repeat="contact in addContList">
          <td>
            <label class="radio-inline">
              <input type="radio" value="" name="ui_cont" ng-model="contact.primary" ng-value="true">
            </label>
          </td>
          <td>{{ contact.name }} value = {{contact.primary}} </td>
          <td>Edit</td>
          <td>Delete</td>
        </tr>

您希望将ngChange事件添加到您的输入中，并在其中一个设置为true时将所有其他输入更改为false。我在这里更新了你的Plnkr：http://plnkr.co/edit/7gxI7if9nC7hAMQES1eu?p=preview

<input type="radio" value="" name="ui_cont" ng-change='changeOnPrimary(contact)' ng-model="contact.primary" ng-value="true">

然后在您的控制器中：

$scope.changeOnPrimary = function(selectedContact) {
  // iterate over your whole list
  angular.forEach($scope.addContList, function(contact) {
    // set primary to false for all contacts excepts selected
    if (selectedContact.name !== contact.name) {
      contact.primary = false;
    }
  });
}

请注意：我比较对象的名称字段的唯一原因是没有唯一的标识符可供比较。在实际代码中，您希望与ID而不是名称字段进行比较。

您可以定义一个新的作用域属性

$scope.primary = null

然后你可以定义一个监听器

$scope.$watch("primary", function(value) {
  $scope.addContList.forEach(function(contact) {
    contact.primary = angular.equals(value, contact);
  })
})

并且您可以在定义列表之后定义默认值

$scope.primary = $scope.addContList[0];

在html中更改中的输入行

<input type="radio" value="" name="ui_cont" ng-model="$parent.primary" ng-value="contact">

您需要使用$parent.primary而不是primary，因为ng-repeat定义了一个新的子作用域。

参见http://plnkr.co/edit/5pvatBNwnrJhGzKhOIys?p=preview

相关文章：