Angularjs - Checkbox value update in array

Question

I am trying to make a simple working hours directive using angularjs. My modal array which looks like this

scope.model = [
    { name: 'Sunday', selected: false, openhoursFrom: '', openhoursTo: '' },
    { name: 'Monday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Tuesday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Wednesday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Thursday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Friday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Saturday', selected: false, openhoursFrom: '', openhoursTo: ''  },
];

What I wanted to do is when a user clicks on a specific checkbox, it suppose to update the that particular day selected: true. I cant seem to achieve this instead when i click is either nothing happens or everything is selected. What should I do to fix this problem?

Here is the link to the plunkr demo.

logee · Accepted Answer · 2015-08-13 03:21:25Z

3

Angular uses camelcase for directive definitions but dashes in html markup. See the doc on normalization

We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

You should be using

ng-model="day.selected"

and not

ngModel="day.selected"

See working forked plunker.

answered Aug 13, 2015 at 3:21

logee

5,0321 gold badge29 silver badges36 bronze badges

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

Comments

clevertension · Accepted Answer · 2015-08-13 03:29:40Z

0

Please add the checkbox change event to update the model selected state

elem.bind('change', function (evt) {
        angular.forEach(scope.model, function (v) {
            if (v.name == evt.target.value) {
              v.selected = evt.target.checked;
              scope.$apply();
            }
        });
      });

you can see the full code here

answered Aug 13, 2015 at 3:29

clevertension

7,1274 gold badges30 silver badges34 bronze badges

1 Comment

Kirill Slatin Over a year ago

This is the worst approach one could imagine for Angular app. There are directive that help with binding, which is the strong part of Angular. But making model updates manually eliminates the reasons to use Angular as framework...

Collectives™ on Stack Overflow

Angularjs - Checkbox value update in array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related