AngularJS - 優れた実践

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"を追加するには：今、あなたは、チェックボックスを選択したときに、それはtrueへcompetence.selectedを設定します、そしてあなたがそれを解除したときに値がfalseになります

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

。

フォームの提出

はng-submit属性で<form>であなたのテーブルをラップし、フォームを送信する関数を作成：あなたのコントローラで

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

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

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

：

また

参照JSFiddle：Checkbox Demo