Question

我的单页中有多个复选框

<div class="check-outer">
    <label>Place of operation</label>
    <div class="checkDiv">
        <div ng-repeat="place in places">
            <div class="checkbox-wrapper">
                <label> 
                    <input type="checkbox" ng-model="placesOBJ[place.place_id]">
                    <span></span>
                </label>
            </div>
            <label class="chk-lbl">{{place.place_name}}</label>
        </div>
    </div>
</div>

这很完美。如果存在数据，那么我想默认选中此复选框

if($scope.client.client_places){
    var plcLength = $scope.client.client_places.length;
    var client_places = new Array();
    for(var i = 0; i < plcLength; i++){
        client_places[i] = $scope.client.client_places[i]['place_id'];
    }
    // console.log(client_places);
    //$scope.placesOBJ4 = client_places;
    $scope.placesOBJ = client_places;
}

客户位置包含{1,2}

等数组

但这不起作用。如果有人知道这个，请帮助我。

Answer 1

您可以使用ng-checked指令并根据模型传递表达式

Answer 2

您可以使用ng-checked来实现您的需求

<input type="checkbox" ng-model="placesOBJ[place.place_id]" ng-checked="placesOBJ">

如果填充$scope.placesOBJ（非空），则表达式为true，并且将选中该复选框

Answer 3

看看这个简单的代码它对你有用

<body ng-app="myApp" ng-controller="HomeCtrl" ng-init="init()">

    <div>
          <label>Place of operation</label>

                    <div ng-repeat="place in places" ng-show="check">
                          <input type="checkbox" ng-model="placesOBJ[place.id]" ng-checked="true">
                          <label class="chk-lbl">{{place.name}}</label>
                    </div>

    </div>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>

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

    app.controller('HomeCtrl', ['$scope',  function($scope) {

        $scope.check=false;
        $scope.places=[{'id':1, 'name':'place1'},{'id':2, 'name':'place2'},{'id':3, 'name':'place3'},{'id':4, 'name':'place4'}];

        $scope.init=function()
        {
            if($scope.places)
            {
                $scope.check=true;
            }
        }

    }]);

  </script>
</body>

说明： - 您可以使用ng-init="init()"来调用页面加载，它会检查数据是否存在。如果存在，则默认设置为ng-show="true"，否则为false

如何使用angular加载页面时选中一个复选框

3 个答案: