使用带有 AngularJS 的函数禁用复选框

Question

我有一个问题，当 ng-model 已经在使用时，如何取消选中 ng-repeat 中的复选框？

这是结构：

对象：

$scope.wines = [

    { "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
    { "name": "Wine a", "type": "white", "country": "france", "style": "light" },
    { "name": "Wine a", "type": "white", "country": "france", "style": "sweet" }
  ];
  $scope.winetypes = {white : true, red: true};
  $scope.whitetypes = {light : false,medium : false,sweet : false};

});

HTML

    <li ng-repeat="(type, value) in winetypes">
      <input type="checkbox" ng-model="winetypes[type]" /> {{type}}
    </li>


   <li ng-repeat="(style, value) in whitetypes">
      <input type="checkbox" ng-model="whitetypes[style]" /> {{style}}
    </li>

    <ul>
      <li ng-repeat="wine in wines | winetypefilter:winetypes |whitefilter:whitetypes">
        {{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
      </li>
    </ul>

• 我的愿望：链接到 whitetypes（轻、中、甜）的复选框将自动取消选中，当 white 复选框将被取消选中。我猜 ng-model 不能用来实现我的愿望，因为它已经在使用了。

我试过没有成功：

$scope.white= function() {
  if($scope.winetypes.white = false) {
    return $scope.whitetypes = {light: false, medium: false, sweet: false}
};

$scope.white;

演示：http://plnkr.co/edit/nIQ2lkiJJY9MwJKHrqOk?p=preview

Answer 1

首先决定你想要什么动作......

• 你想改变一个复选框模型，它的值应该生效 其他复选框值...

所以我想到的第一个解决方案是......

• ng-change（因为您希望更改复选框属性）
• ng-click（要更改复选框属性，您应该单击该输入）
• ng-checked（设置条件为勾选或不勾选）

好的，让我们继续我们的解决方案......在分析了这三个（可以有更多的解决方案）ng-change 最适合这种情况，因为它保证在用户更改复选框的值后将执行绑定功能......对于更多详情请查看official docs

首先编辑您的 html...

<li ng-repeat="(type, value) in winetypes">
  <input type="checkbox" ng-model="winetypes[type]" ng-change="disableRelatedStyles(type, winetypes[type])"/> {{type}}
</li>

并将我们的新功能 (disableRelatedStyles) 添加到我们的控制器...

  $scope.disableRelatedStyles = function (type, value) {
    if (type == 'white' && !value) {
      for(var style in $scope.whitetypes) {
         $scope.whitetypes[style] = false;
      }
    }
  };

最后是工作的PLUNKER...

Answer 2

您可以做的是使用ng-click 和$timeout 来处理对白色复选框的每次点击。

$scope.click_handler = function (type) {
    if (type == 'white') {
        $timeout(function () {
            if ($scope.winetypes[type] === false) {
                $scope.wines.forEach(function (e) {
                    if (e.type == 'white') {
                        $scope.whitetypes[e.style] = false;
                    }
                })
            }
        })
    }
};

$timeout 是必要的，因为我们想先等待 ng-model 更新。确保将$timeout 注入控制器。

在标记中

<input type="checkbox" ng-click="click_handler(type)" ng-model="winetypes[type]" /> {{type}}

这是一个有效的Plunker