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

Question

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

我还有一个单选按钮 select 哪个联系人是主要联系人。

问：如何让一个联系人成为主要联系人并停用所有其他联系人（主要：false）？所以只有一个对象有属性（主要：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>

Answer 1

您可能希望向您的输入添加一个 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 而不是名称字段进行比较。

Answer 2

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

$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

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

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

javascript

radio-button

angularjs