Chinmay235 Chinmay235 -4 years ago 104
AngularJS Question

How to set default checked in multiple checkbox - AngularJS



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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download