CODEWITHSUNDEEP
angularjs
Subhankar Bhattacharjee
Subhankar Bhattacharjee

Reputation: 183

How to checked checkbox dynamically in angularjs

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.

Upvotes: 0

Views: 5535

Answers (2)

S Kumar
S Kumar

Reputation: 595

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 .

Upvotes: 0

user449689
user449689

Reputation: 3154

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>

Upvotes: 2

Related Questions