使用Angularjs取消选中基于另一个复选框的所有复选框

Question

我试图找出如果用户检查N/A所有其他框都未选中（如果已选中）。下面是我的工作，但我不知道如何取消选中这些框并将它们设置为false任何帮助都非常感谢。

＆＃13;

＆＃13;

var app = angular.module('MyApp', []);

app.controller('MyAppController', ['$scope',
  function($scope) {
    $scope.appliances = [{
        Name: 'N/A'
      },
      {
        Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      }
    ];

    $scope.myObj = {};
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]"> {{ app.Name }}
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用ng-change触发功能来更改基础内容。

＆＃13;

＆＃13;

var app = angular.module('MyApp', []);
  
app.controller('MyAppController',['$scope',
  function($scope) {
  	$scope.appliances = [
    	{
      	Name: 'N/A'
      },
      {
      	Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
      	Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
      	Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      }
    ];
    
    $scope.myObj = {};

    $scope.checkForNA = function () {
        if ($scope.myObj[$scope.appliances[0].Name]) {
            $scope.myObj = {};
            $scope.myObj[$scope.appliances[0].Name] = true;
        }
    }
  }]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="checkForNA()">
      {{ app.Name }} 
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

像这样的东西

var app = angular.module('MyApp', []);
  
app.controller('MyAppController',['$scope',
  function($scope) {
  	$scope.appliances = [
    	{
      	Name: 'N/A'
      },
      {
      	Name: 'Computer',
        ExcludedBy: 'N/A',
        IsSelected: false,
        IsDisabled: false
      },
      {
      	Name: 'TV',
        ExcludedBy: 'N/A',
        IsSelected: false,
        IsDisabled: false
      },
      {
      	Name: 'Voice Assistant',
        ExcludedBy: 'N/A',
        IsSelected: false,
        IsDisabled: false
      }
    ];
    
    $scope.myObj = {};
    $scope.checkAll = function(name, isSelected){
      if(name === 'N/A'){
      
        for(var i =0; i< $scope.appliances.length; i++){
        if($scope.appliances[i].Name != name && $scope.appliances[i].ExcludedBy===name){
          $scope.appliances[i].IsSelected = false;
          $scope.appliances[i].IsDisabled = !isSelected;
          }
        }
      }
    };
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox"  ng-disabled="app.IsDisabled" ng-click="checkAll(app.Name, app.IsSelected)" ng-model="app.IsSelected">
      {{ app.Name}}
    </div>
  </div>
</div>

Answer 3

在这种情况下，DavidX的答案是正确的。但是，我们可以使用Array#find()以通用方式改进验证ExcludedBy属性的存在方式。

  

不一定，数组$scope.appliances的第一个元素将是N/A项。

var naItem = $scope.appliances.find(function(x) {
  return x.ExcludedBy === undefined;
});

对于这个例子，我正在使用ng-change指令。

这样的事情：

第一个例子：

var app = angular.module('MyApp', []);

app.controller('MyAppController', ['$scope',
  function($scope) {
    $scope.appliances = [{
        Name: 'N/A'
      },
      {
        Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      }
    ];

    $scope.myObj = {};
    $scope.check = function() {
      var naItem = $scope.appliances.find(function(x) {
        return x.ExcludedBy === undefined;
      });
      if ($scope.myObj[naItem.Name]) {
        $scope.myObj = {};
        $scope.myObj[naItem.Name] = true;
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
    </div>
  </div>
</div>

第二个例子：

var app = angular.module('MyApp', []);

app.controller('MyAppController', ['$scope',
  function($scope) {
    $scope.appliances = [{
        Name: 'Computer',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'TV',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'Voice Assistant',
        ExcludedBy: 'N/A'
      },
      {
        Name: 'N/A'
      }
    ];

    $scope.myObj = {};
    $scope.check = function() {
      var naItem = $scope.appliances.find(function(x) {
        return x.ExcludedBy === undefined;
      });
      if ($scope.myObj[naItem.Name]) {
        $scope.myObj = {};
        $scope.myObj[naItem.Name] = true;
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
  <div ng-controller="MyAppController">
    <div ng-repeat="app in appliances">
      <input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
    </div>
  </div>
</div>