How to automatically select check box based on the data in angularjs?

Question

In my webapp there are list of check boxes present. What i need is, from back-end am getting a list where data is present, based on this data i want to automatically check the checkbox. If it confusing the below is my code.

html

    <span ng-repeat="days in selectDays">
        <input type="checkbox" id="{{days}}" ng-model="selectedList[days]" value="{{days | uppercase}}"/>
        <label for="{{days}}">{{days}}</label>
    </span>

controller

     $scope.selectDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

From back end i am getting below data in response

    ["SUN", "MON"];

below am sharing the snapshot of my page.

My need is to check the response data with $scope.selectDays if it is present then i have to check that respective check box. i.e. if "SUN" is there in the list then i have to check that.

Provided answer according to my understanding, let me know anything else you require ! — Chandra Prakash Variyani
– Chandra Prakash Variyani, Commented Dec 9, 2016 at 8:20

Naghaveer R · Accepted Answer · 2016-12-09 08:01:58Z

2

You can use ng-checked

  <span ng-repeat="days in selectDays">
    <input type="checkbox" ng-checked="response.indexOf(days) !== -1" id="{{days}}" ng-model="selectedList[days]" value="{{days | uppercase}}"/>
    <label for="{{days}}">{{days}}</label>
</span>

DEMO

answered Dec 9, 2016 at 8:01

Naghaveer R

2,9424 gold badges33 silver badges53 bronze badges

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

1 Comment

lin Over a year ago

KISS! Great solution.

Deadpool · Accepted Answer · 2016-12-09 07:59:11Z

Look it:

<html>

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

<div id="wrapper" ng-repeat="x in dayList">

<input type="checkbox" ng-checked="findIt(x.name)">{{x.name}}

</div>

<script>
//module declaration
var app = angular.module('myApp',[]);

//controller declaration
app.controller('myCtrl',function($scope){
    $scope.dayList = [{name:'Sun'}, {name:'Mon'}, {name:'Tue'}, {name:'Wed'}, {name:'Thu'}, {name:'Fri'}, {name:'Sat'}];
    $scope.marked = ['Sun','Wed'];

$scope.findIt = function(item){
    if($scope.marked.indexOf(item)!= -1){return true;}
}


});

</script> 

</body> 

</html>

Result:

Hope, this helps!

Chandra Prakash Variyani · Accepted Answer · 2016-12-09 08:20:16Z

HTML

<div ng-controller="MyCtrl">
  <span ng-repeat="days in selectDays">
        <input type="checkbox" id="{{days.Day}}"  value="{{days.Day | uppercase}}"  ng-checked="days.IsCheck"/>
        <label for="{{days.Day}}">{{days.Day}}</label>
    </span>
</div>

JS

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $filter) {
    $scope.selected = ['Sun', 'Wed']
    $scope.selectDays = [{"Day" : 'Sun',"IsCheck" : false},
    {"Day" : 'Mon',"IsCheck" : false}, {"Day" : 'Tue',"IsCheck" : false},
     {"Day" : 'Wed',"IsCheck" : false}]

     angular.forEach($scope.selected,function(obj,i){

             var obj = $filter('filter')($scope.selectDays, { Day: obj })[0];
         if(obj != null)
         {
            obj.IsCheck = true;
        }
     })
}

Please find jsfiddle link as well

Demo

Collectives™ on Stack Overflow

How to automatically select check box based on the data in angularjs?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related