Angular - ng-init checkbox value from controller object

Question

I'm trying to pass a boolean value to an ng-init="checked=presenter.present" so that the checkbox will display checked or not. But it doesn't seem to be passing the value. I've tried ng-init="checked={{ presenter.present }}" but I get an error. I will have a lot of checkboxes, so I need to be able to pass a boolean from the controller object to determine whether the checkbox is pre-checked. Any help? Thanks!

front-end code

<div class="row" ng-repeat="person in vm.people">
    <div class="small-12 large-3 columns"><input type="text" ng-model="person.name"></div>
    <div class="small-4 large-1 text-center columns">
        <div class="checkbox">
            <input type="checkbox" id="{{ person.prid }}" name="{{ person.prid }}" ng-init="checked=person.present" />
            <label for="{{ person.prid }}"></label>
        </div>
    </div>
    .
    .
    .
    <div class="small-12 large-6 columns"><input type="text" ng-model="person.notes"></div>
</div>

controller object

    vm.people = [{
        name: 'Evan',
        prid: 'aaa',
        present: true,
        spid: 'aba',
        speaking: true,
        soid: 'abc',
        soundcheck: true,
        notes: 'stuff',
    }, {
        name: 'Amy',
        prid: 'baa',
        present: true,
        spid: 'bba',
        speaking: true,
        soid: 'bbc',
        soundcheck: true,
        notes: 'blah blah',
    }, {
        name: 'Linda',
        prid: 'caa',
        present: true,
        spid: 'cba',
        speaking: true,
        soid: 'cbc',
        soundcheck: false,
        notes: 'blah blah blah blah',
    }, {
        name: 'Tim',
        prid: 'daa',
        present: true,
        spid: 'dba',
        speaking: true,
        soid: 'dbc',
        soundcheck: true,
        notes: 'blah blah blah',
    }];

ng-init should be used sparingly, from the docs: This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope. — PeterS
– PeterS, Commented Jun 23, 2016 at 16:29
Thanks for the comment, I'll try not to use ngInit for petty purposes again. :) — Kenny
– Kenny, Commented Jun 23, 2016 at 16:42

Pankaj Parkar · Accepted Answer · 2016-06-23 16:29:23Z

2

You should use ng-model over that check-box element, so that it will automatically get checked or unchecked based on value of person.present. Basically two way binding magic of angular will do the trick.

<input type="checkbox" id="{{person.prid}}" 
   name="{{person.prid}}" ng-model="person.present" />

edited Jun 23, 2016 at 16:29

answered Jun 23, 2016 at 16:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Kenny Over a year ago

Awesome, that seemed to do the trick! I'll remember that from now on. Thank you for your answer. (I'll accept it as answer in a moment, it's on a timer)

Pankaj Parkar Over a year ago

@Kenny sure, np, Glad to help you, Thanks :-)

Collectives™ on Stack Overflow

Angular - ng-init checkbox value from controller object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related