javascript - Angularjs 如何使复选框选中？

Question

嗨，我正在用 angularjs 开发 Web 应用程序。我有一种形式。我将值绑定(bind)到多选下拉列表。

  <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>

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

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

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

Answer 1

基本上，如果我们的输入是一个包含应选择位置的字符串(即 varlocations = 'ABC,DEF';)，我们可以按 , 分割该字符串。 code> 字符并获取一个包含要匹配的位置的数组:

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>