How to set default checked in multiple checkbox - 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. I want to default checked PHP , HTML and MYSQL which contain in in $scope.existed variable.

Please help me.

Answer 1

create a function and call in in 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

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>

How to set default checked in multiple checkbox - AngularJS

Question

2 answers

solution1
3 ACCPTED 2017-03-23 12:35:56

solution2
2 2017-03-23 12:32:34

How to set default checked in multiple checkbox - AngularJS

Question

2 answers

solution1 3 ACCPTED 2017-03-23 12:35:56

solution2 2 2017-03-23 12:32:34

solution1
3 ACCPTED 2017-03-23 12:35:56

solution2
2 2017-03-23 12:32:34