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.

What's the point of the second array, why not just have {id:1, name:'PHP', checked:true} in $scope.technologies? — George
– George, Commented Mar 23, 2017 at 12:28

Sachila Ranawaka · Accepted Answer · 2017-03-23 12:35:56Z

3

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>

answered Mar 23, 2017 at 12:35

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chinmay235 Over a year ago

Hi, I am getting error this line var dat = $scope.existed.find(o=> o.name === name);

Chinmay235 Over a year ago

SyntaxError: expected expression, got '>'

Nikhil Bhandari Over a year ago

You are asking him to write ES6 when all code is in ES5? May be add a line about browser support?

Sachila Ranawaka Over a year ago

$scope.existed.find(function(o){ return o.name === name}); add this one

Sachila Ranawaka Over a year ago

this one will support es5

|

Nikhil Bhandari · Accepted Answer · 2017-03-23 12:32:34Z

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>

Collectives™ on Stack Overflow

How to set default checked in multiple checkbox - AngularJS

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related