来自控制器对象的Angular-ng-init复选框值

时间:2016-06-23 16:17:50

标签: javascript angularjs

我正在尝试将布尔值传递给ng-init="checked=presenter.present",以便复选框显示是否已选中。但它似乎没有超越价值。我试过ng-init="checked={{ presenter.present }}"但是我收到了错误。我将有很多复选框,所以我需要能够从控制器对象传递一个布尔值来确定是否预先选中了复选框。有帮助吗?谢谢!

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',
    }];

1 个答案:

答案 0 :(得分:2)

您应该使用ng-model覆盖该复选框元素,以便根据person.present的值自动检查或取消选中它。基本上双向绑定神奇的角度就可以解决问题。

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