Angularjs如何检查复选框？答案

【问题标题】：Angularjs how to make checkbox checked?Angularjs如何检查复选框？
【发布时间】：2017-08-22 19:24:07
【问题描述】：

您好，我正在用 angularjs 开发 Web 应用程序。我有一个表格。我正在将值绑定到多选下拉列表。

  <li ng-repeat="p in locations">
  <input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
  <span>{{p.Location}}</span>
  </li>

我正在将数组绑定到位置。我的数组看起来像

0:  id: 1  Location:"ABC"
1:  id: 2  Location:"DEF"
2:  id: 3  Location:"IJK"

现在我的要求是检查一些值。假设如果我有var locations="ABC,DEF"，那么我只想检查那些值。我可以知道这是否可以做到。任何帮助，将不胜感激。谢谢你。

【问题讨论】：

尝试通过 Javascript/jquery 将“checked=true”属性添加到所需的输入元素（即在您的情况下为 ABC 和 DEF）。
查看此链接将对您有所帮助。 stackoverflow.com/questions/21352034/…
AngularJS ng-repeat setting default select value的可能重复
谢谢阿杰。我知道我必须设置checked=true，但我怎样才能只检查ABC或DEF。如何在控制器中做到这一点？
在您的布尔数据类型数组中有另一个属性，并以真/假值发送它。在选中的属性中填充布尔属性。

标签： javascript angularjs

【解决方案1】：

基本上，如果我们的输入是一个字符串，其中包含应选择的位置（即var locations = 'ABC,DEF';），我们可以用, 字符拆分此字符串并获得一个包含要匹配位置的数组：

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

app.controller("locationsController", ["$scope",
    function ($scope) {
        // vars 
        var locations = 'ABC,DEF';
    
        // functions
        function init () {
            var locals = locations.split(',');
        
            angular.forEach($scope.locations, function (item) {
                if (locations.indexOf(item.Location) > -1) {
                    item.checked = true;
                }
            });
        }
    
        // $scope
        $scope.locations = [
            { id: 1, Location: "ABC" }, 
            { id: 1, Location: "DEF" }, 
            { id: 1, Location: "IJK" }
        ];
        
        // init
        init();
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
   <div ng-controller="locationsController">
      <li ng-repeat="p in locations">
         <input ng-checked="p.checked" type="checkbox" ng-model="p.checked" required/>
         <span>{{ p.Location }}</span>
      </li>
   </div>
</div>

【讨论】：

【解决方案2】：

试试这个。为每个复选框定义单独的模型。

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

app.controller("Controller", ["$scope",
  function($scope) {
    $scope.locations = [{
      "id": 1,
      Location: "ABC"
    }, {
      "id": 1,
      Location: "DEF"
    }, {
      "id": 1,
      Location: "IJK"
    }]

    var checked = ['ABC','DEF'];
    function init() {
      angular.forEach($scope.locations,function(location){
        if(checked.indexOf(location.Location) != -1){
          location.checked = true;
         }
      })
    }
    init();

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <li ng-repeat="p in locations">
      <input type="checkbox" ng-model="p.checked" name="location" required/>
      <span>{{p.Location}}</span>
    </li>
  </div>
</div>

【讨论】：

谢谢。如果我想在页面加载时检查 ABC 或 DEF，那么该怎么做？

【解决方案3】：

它应该可以工作：-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$filter) {

  $scope.selectedValue = 'ABC,IJK';
  $scope.selectedValue = $scope.selectedValue.split(',');
 
  $scope.options = [{
    id: 0,
    name: 'ABC'
  }, {
    id: 1,
    name: 'DEF'
  }, {
    id: 2,
    name: 'IJK'
  }];
  $scope.selected = [];
  angular.forEach($scope.selectedValue,function(val,key){
  var r = $filter('filter')( $scope.options, {name: val})[0].id;  
  if(r != undefined){
   $scope.selected[r]=true;
  }else{
   $scope.selected[r]=false;
   }
  
 
  });
  

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <li ng-repeat="p in options">
      <input type="checkbox" ng-model="selected[p.id]" ng-change="getIndex(p.Location,isTrue )" />
      <span>{{p.name}}</span>
    </li>
    Selected : {{selected}}
  </div>

【讨论】：

我想要复选框。

【解决方案4】：

试试这个，因为每个复选框都需要不同的 ngModel，所以需要将它们放在位置对象本身中。

HTML：

 <li ng-repeat="p in locations">
     <input type="checkbox" ng-checked="master" ng-model="p.isTrue" ng-change="getIndex(p.Location, p.isTrue)" ng-name="location" required/>
     <span>{{p.Location}}</span>
 </li>

在 Javascript 中：

$scope.locations = [
    {id: 1  Location:"ABC"},
    {id: 2  Location:"DEF"},
    {id: 3  Location:"GHI"}
];
var selectedLocations="ABC,DEF";
selectedLocations = locations.split(",");
angular.forEach($scope.locations, function(loc){
    loc.isTrue = selectedLocations.indexOf(loc.Location) > -1;
});

【讨论】：

【解决方案5】：

试试这个：

<li ng-repeat="p in locations">
  <input type="checkbox" ng-checked="p.Location == 'ABC' || p.Location == 'DEF'? true : false" ng-model="p.master" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
  <span>{{p.Location}}</span>
</li>

【讨论】：

【解决方案6】：

再添加一个字段checked:"true" 与您的位置类似

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

app.controller("Controller", ["$scope",
  function($scope) {
    $scope.locations = [{id:1,Location:"ABC",checked:"false"},{id:1,Location:"DEF",checked:"true"},{id:1,Location:"IJK",checked:"true"}]

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Controller">
    <li ng-repeat="p in locations">
      <input ng-checked="{{p.checked}}" type="checkbox" ng-model="p.id"  name="location" required/>
      <span>{{p.Location}}</span>
    </li>
  </div>
</div>

【讨论】：

【解决方案7】：

将另一个变量添加到您的数组中。并在其中设置值 true/false

0:  id: 1  Location:"ABC" flag : true
1:  id: 2  Location:"DEF" flag : false

<li ng-repeat="p in locations">
    <input type="checkbox" ng-checked="p.flag" ng-model="isTrue" ng-
    change="getIndex(p.Location,isTrue )" ng-name="location" required/>
    <span>{{p.Location}}</span>
 </li>

使用该标志来检查未选中的复选框/

【讨论】：