Question

所以我是AngularJS的新手，我希望创建好的代码，因为我的应用程序将会扩展。

现在，我有一个能从我的API获得的权限列表，然后我需要使用复选框列出它们，因此用户将从列表中选择/取消选择，然后提交该表单

那我怎么能实现呢？每个复选框的ng模型应该是什么？我应该创建一个表格，其中所有值都设置为false吗？

现在是我的控制器代码：

function Controller(Competence) {

    var vm = this;

    vm.competences = [];

    function initController() {
        Competence.getAll()
            .then(function(data) {
                vm.competences = data;
        });
    }

    initController();

}

这是我的观看代码：

<table>
    <thead>
        <tr>
            <th width="90%">Competence</th>
            <th width="10%">Select</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="competence in vm.competences">
            <td>{{ competence.name }}</td>
            <td><input type="checkbox"></td>
        </tr>
    </tbody>
</table>

Answer 1

到目前为止，您的代码看起来不错。要设置复选框值，只需将ng-model="competence.selected"添加到每个复选框输入元素，如下所示：

<input type="checkbox" ng-model="competence.selected">

现在，当您选中该复选框时，它会将competence.selected设置为true，当您取消选中该值时，该值将为false。

表单提交

将表格包裹在<form>的{{1}}属性中，并创建一个提交表单的函数：

ng-submit

在您的控制器中：

<form ng-controller="MyCtrl as vm" ng-submit="vm.submitForm()">

  <!-- your table here ... -->

<input type="submit" value="Submit">
</form>

另见JSFiddle：Checkbox Demo

AngularJS - 形成良好实践

1 个答案: