Angularjs如何选中复选框？

Hi I am developing web application in angularjs. I have one form. I am binding values to multi select dropdown.

嗨，我正在开发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>

I am binding array to locations. My array look likes

我将数组绑定到位置。我的阵列看起来很喜欢

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

Now my requirement is to make checked some values. Suppose if i have var locations="ABC,DEF" then i want to make only those values checked. May i know if this can be done. Any help would be appreciated. Thank you.

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

7 个解决方案

#1

Basically, if our input is a string with the locations that should be selected (i.e) var locations = 'ABC,DEF'; we can split this string by the , character and get an array with the locations to match:

基本上，如果我们的输入是一个字符串，其中应该选择位置（即）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

Try this. Define for each checkbox separate model.

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

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>

#3

It should work:-

它应该工作： -

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

Try this, Since you need different ngModel for each check box, you need to put them inside the location object itself.

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

HTML:

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>

In Javascript:

在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

Try this:

尝试这个：

<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

Add one more field checked:"true" with your locations like this

再添加一个字段：“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

Add another variable to your array. and set the value true/false in it

将另一个变量添加到数组中。并在其中设置值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>

Use that flag to check unchek ur checkbox/

使用该标志检查取消勾选复选框/

#1