javascript - AngularJS - 形成良好的实践

Question

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

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

那么我怎样才能实现这一目标呢？每个复选框的 ng-model 中应该包含什么？我应该创建一个表单并将所有值设置为 false 吗？

现在这是我的 Controller 代码:

function Controller(Competence) {

    var vm = this;

    vm.competences = [];

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

    initController();

}

这是我的 View 代码:

<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>包裹你的 table 与 ng-submit属性，并创建一个函数来提交表单:

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

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

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

在你的 Controller 中:

vm.submitForm = function(){

    vm.competences.forEach(function(competence){

        if(competence.selected) console.log(competence);

        // or POST the competences using the $http service ...

    })

  }

另请参阅 JSFiddle:Checkbox Demo