How to checked checkbox dynamically in angularjs

Question

Below is the code for get all events.

var request = $http({
    method: "post",
    url: SITE_URL + '/api/getallevents',            
}).then(function(response){ 
    angular.forEach(response.data, function(item) {
        $scope.events = item;                
    });                       
});

And output is :

{"data":[
        {"event_id":"2","name":"I have a new message"},
        {"event_id":"3","name":"A meeting awaits me"},
        {"event_id":"4","name":"Someone visited my profil"},
        {"event_id":"5","name":"Someone like my profile"},
        {"event_id":"6","name":"My picture was approved"},
        {"event_id":"7","name":"My picture was rejected"},
        {"event_id":"8","name":"VIP purchase confirmation"}
    ]}

This is for logged in user's events

var request = $http({
    method: "post",
    url: SITE_URL + '/api/getuserevents',
    data: {  
        id:$window.sessionStorage.userid,                                   
    },
}).then(function(response){ 
    angular.forEach(response.data, function(item) {
        $scope.events.Selected = item;           
    }); 
});

And output is :

{"data":[
    {"event_id":"2","name":"I have a new message"},
    {"event_id":"3","name":"A meeting awaits me"}
]}

View file is :

<label ng-repeat="event in events">
    <input type="checkbox" value="{{event.event_id}}" ng-model="event.Selected" checklist-model="user.events" checklist-value="event" ng-checked="event.Selected"> {{event.name}}
</label>

Now I want those selected data to checked among all checkbox. How is it possible.

user449689 · Accepted Answer · 2016-10-05 14:48:16Z

2

You should not make 2 calls to my webserver to extract first the whole list of events and then the events for the single user.

You should edit your server method to extract a list that will look like this:

{"data":[
    {"event_id":"2","name":"I have a new message", "selected": "true"},
    {"event_id":"3","name":"A meeting awaits me", "selected": "true"},
    {"event_id":"4","name":"Someone visited my profil", "selected": "false"},
    {"event_id":"5","name":"Someone like my profile", "selected": "false"},
    {"event_id":"6","name":"My picture was approved", "selected": "false"},
    {"event_id":"7","name":"My picture was rejected", "selected": "false"},
    {"event_id":"8","name":"VIP purchase confirmation", "selected": "false"}
]}

Then you will be able to render your list as follows:

<label ng-repeat="event in events">
    <input type="checkbox" value="{{event.event_id}}" ng-model="event.Selected" checklist-model="user.events" checklist-value="event" ng-checked="event.selected"> {{event.name}}
</label>

answered Oct 5, 2016 at 14:48

user449689

3,1544 gold badges22 silver badges37 bronze badges

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

3 Comments

user449689 Over a year ago

@SubhankarBhattacharjee What error are you getting?

Subhankar Bhattacharjee Over a year ago

After doing ng-checked="{{event.selected}}" it is working

Prem Patel Over a year ago

Don't put Boolean value in quotes, otherwise it will be always true for ng-checked.

user449689 · Accepted Answer · 2016-10-05 15:11:36Z

0

Below code need to be used.

<label ng-repeat="event in events">
        <input type="checkbox" checklist-model="user.events" checklist-value="event"> {{event.name}}
    </label>

where

user.events = [
    {"event_id":"2","name":"I have a new message"},
    {"event_id":"3","name":"A meeting awaits me"}]`

and

events = [
    {"event_id":"2","name":"I have a new message"},
    {"event_id":"3","name":"A meeting awaits me"},
    {"event_id":"4","name":"Someone visited my profil"},
    {"event_id":"5","name":"Someone like my profile"},
    {"event_id":"6","name":"My picture was approved"},
    {"event_id":"7","name":"My picture was rejected"},
    {"event_id":"8","name":"VIP purchase confirmation"}
]

Whatever selected data you want to be checked, keep that in checklist-model . Keeping that in checklist-model will automatically get it checked , there is no requirement of using ng-model or ng-checked.

Also, there is no need to use value= "{{event.event_id}}" as you can get that data from checklist-model .

edited Oct 5, 2016 at 15:11

user449689

3,1544 gold badges22 silver badges37 bronze badges

answered Oct 5, 2016 at 14:53

S Kumar

5957 silver badges23 bronze badges

1 Comment

S Kumar Over a year ago

This is the way data are prechecked using checklist-model. I have used the same way. Create , a fiddle or plunker , so that we can see the exact issue you are facing and can help you.

Collectives™ on Stack Overflow

How to checked checkbox dynamically in angularjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related