在嵌套的ng-repeat angularjs中禁用带有复选框的按钮

Question

我想用 nested angularjs ng-repeat 中的 checkbox 禁用 按钮。我的意思是禁用当前 ng-repeat 数组中的按钮。我的代码如下例所示，

angular.module('test', [])

.controller('myController', ['$scope', function($scope) {
    $scope.hasSelectedAnItem = false;
  $scope.mainItems = [
    { dropdownlist: [
      {OptionValue: 123, OptionName: "Adam", IsSelected: true},
      {OptionValue: 234, OptionName: "Paul", IsSelected: false},
      {OptionValue: 345, OptionName: "Jason", IsSelected: true},
      {OptionValue: 464, OptionName: "Joe", IsSelected: false}
    ]},
    { dropdownlist: [
      {OptionValue: 923, OptionName: "Adam2", IsSelected: true},
      {OptionValue: 934, OptionName: "Paul2", IsSelected: false},
      {OptionValue: 945, OptionName: "Jason2", IsSelected: true},
      {OptionValue: 964, OptionName: "Joe2", IsSelected: false}
    ]}
    ];
   
   $scope.canBeSaved = function(item) {
        alert(item);
      var found = false;
        $scope.mainItems.forEach(function(item) {
        if (item.IsSelected) {
            found = true; 
        }
      });
      $scope.hasSelectedAnItem = found;
   }
   
   $scope.save = function() {
        alert($scope.cat.IsSelected);
   }
   
   $scope.canBeSaved();
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<div ng-app="test" ng-controller="myController">
  <div ng-repeat="items in mainItems">
    <button ng-click="save()" ng-disabled="!hasSelectedAnItem" class="btn btn-sm btn-block btn-primary">
      Save
    </button>
    <ul class="categories-list">
        <li ng-repeat="cat in items.dropdownlist">
            <label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected" ng-change="canBeSaved(cat.OptionValue)"/> {{cat.OptionName}}</label>
        </li>
    </ul>
  </div>
</div>

需要你的帮助。 代码https://jsfiddle.net/malikzahid321/nc63hz90/24/ 的工作示例谢谢

Answer 1

最简单的方法是使用 ng-model（你就是），它会在您每次选中/取消选中时更新数据数组。然后你可以在你的ng-disabled 中放置一个函数，传递items 集合并使用Array#some 测试任何“真实”值。不需要你拥有的ng-check 函数。

...  ng-disabled="checkList(items)" ...

在你的控制器中

$scope.checkList = function(items) {
      return !items.some(a => a.IsSelected)
  }

angular.module('test', [])

.controller('myController', ['$scope', function($scope) {
    $scope.hasSelectedAnItem = false;
  $scope.mainItems = {
    itemss: [
      {OptionValue: 123, OptionName: "Adam", IsSelected: true},
      {OptionValue: 234, OptionName: "Paul", IsSelected: false},
      {OptionValue: 345, OptionName: "Jason", IsSelected: true},
      {OptionValue: 464, OptionName: "Joe", IsSelected: false}
    ],
    items: [
      {OptionValue: 923, OptionName: "Adam2", IsSelected: true},
      {OptionValue: 934, OptionName: "Paul2", IsSelected: false},
      {OptionValue: 945, OptionName: "Jason2", IsSelected: true},
      {OptionValue: 964, OptionName: "Joe2", IsSelected: false}
    ]
  };
  
  $scope.checkList = function(items) {
      return !items.some(a => a.IsSelected)
  }
   
  $scope.save = function() {
        alert($scope.cat.IsSelected);
   }
   
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<div ng-app="test" ng-controller="myController">
  <div ng-repeat="items in mainItems">
    <button ng-click="save()" ng-disabled="checkList(items)" class="btn btn-sm btn-block btn-primary">
      Save
    </button>
    <ul class="categories-list">
      <li ng-repeat="cat in items">
        <label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected"/> {{cat.OptionName}}</label>
      </li>
    </ul>
  </div>
</div>