如何设置默认选中多个复选框-AngularJS

Question

 var demoApp = angular.module('myApp', []); demoApp.controller('QaController', function($scope, $http) { $scope.technologies = [ {id:1, name:'PHP'}, {id:2, name:'DOTNET'}, {id:3, name:'JAVA'}, {id:4, name:'ORACLE'}, {id:5, name:'ROR'}, {id:6, name:'PYTHON'}, {id:7, name:'C'}, {id:8, name:'MYSQL'}, {id:9, name:'HTML'}, {id:10, name:'SQL'}, ]; $scope.existed = [ {id:1, name:'PHP'}, {id:8, name:'MYSQL'}, {id:9, name:'HTML'} ]; $scope.submit = function() { $scope.result = $scope.loopData; }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController"> <div ng-repeat="technology in technologies"> <input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" ng-checked="technology.id==existed[$index].id" /> <label for="technology{{$index}}" ng-bind="technology.name"></label> </div> </div> </body>

Above I have posted sample example. 上面我贴了示例示例。 I have total 10 technologies. 我共有10项技术。 I want to default checked PHP , HTML and MYSQL which contain in in $scope.existed variable. 我想默认检查$scope.existed变量中包含的PHP ， HTML和MYSQL 。

Please help me. 请帮我。

Answer 1

create a function and call in in ng-checked 创建一个函数并在ng-checked调用

$scope.checkID = function(name){
      var dat = $scope.existed.find(o=> o.name === name);
      if(dat) {return true }else{ return false}
}

<input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" ng-checked="checkID(technology.name)" />

 var demoApp = angular.module('myApp', []); demoApp.controller('QaController', function($scope, $http) { $scope.technologies = [ {id:1, name:'PHP'}, {id:2, name:'DOTNET'}, {id:3, name:'JAVA'}, {id:4, name:'ORACLE'}, {id:5, name:'ROR'}, {id:6, name:'PYTHON'}, {id:7, name:'C'}, {id:8, name:'MYSQL'}, {id:9, name:'HTML'}, {id:10, name:'SQL'}, ]; $scope.existed = [ {id:1, name:'PHP'}, {id:8, name:'MYSQL'}, {id:9, name:'HTML'} ]; $scope.checkID = function(name){ var dat = $scope.existed.find(o=> o.name === name); if(dat) {return true }else{ return false} } $scope.submit = function() { $scope.result = $scope.loopData; }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController"> <div ng-repeat="technology in technologies"> <input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" ng-checked="checkID(technology.name)" /> <label for="technology{{$index}}" ng-bind="technology.name"></label> </div> </div> </body>

Answer 2

Add a checked key in your model 在模型中添加选中的密钥

  {id:1, name:'PHP', checked:true},

and remove ng-checked 并删除ng-checked

Working version 工作版本

 var demoApp = angular.module('myApp', []); demoApp.controller('QaController', function($scope, $http) { $scope.technologies = [ {id:1, name:'PHP', checked:true}, {id:2, name:'DOTNET'}, {id:3, name:'JAVA'}, {id:4, name:'ORACLE'}, {id:5, name:'ROR'}, {id:6, name:'PYTHON'}, {id:7, name:'C'}, {id:8, name:'MYSQL', checked:true}, {id:9, name:'HTML'}, {id:10, name:'SQL'}, ]; $scope.submit = function() { $scope.result = $scope.loopData; }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController"> <div ng-repeat="technology in technologies"> <input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" /> <label for="technology{{$index}}" ng-bind="technology.name"></label> </div> </div> </body>

如何设置默认选中多个复选框-AngularJS

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-03-23 12:35:56

解决方案2
2 2017-03-23 12:32:34

如何设置默认选中多个复选框-AngularJS

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-03-23 12:35:56

解决方案2 2 2017-03-23 12:32:34

解决方案1
3 已采纳 2017-03-23 12:35:56

解决方案2
2 2017-03-23 12:32:34