AngularJSで機能しないすべての機能をチェック/チェック解除する

Question

ビュー内のすべてのチェックボックスを選択/選択解除できる機能を設定しようとしました。しかし、それはまったく動かないようです。私が欠けているものはありますか？

私の実装は次の通りです：http://jsfiddle.net/deeptechtons/TKVH6/。

detail.html

<li class="item item-checkbox"> 
    All Services<br> 
    <label class="checkbox"> 
     <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" ng-model="selectedAll"> 
    </label> 
</li>    
<li class="item item-checkbox" ng-repeat="e in inventory"> 
    {{ e.title }}<br> 
    <span class="grey-text">&pound;{{ e.price | number: 2 }}</span> 
    <label class="checkbox"> 
     <input type="checkbox" ng-model="item.selected"> 
    </label> 
</li> 

controller.js

$scope.checkAll = function() { 
    if ($scope.selectedAll) { 
     $scope.selectedAll = true; 
    } else { 
     $scope.selectedAll = false; 
    } 
    angular.forEach($scope.inventory, function (item) { 
     item.selected = $scope.selectedAll; 
    }); 
    }; 

Answer 1

あなたのコードのこの部分は意味がありません。値がtrueの場合はtrueに設定し、falseと同じに設定してください。

if ($scope.selectedAll) { 
    $scope.selectedAll = true; 
} else { 
    $scope.selectedAll = false; 
} 

また、あなたの代わりにng-clickのng-changeを使用したほうが良いでしょう。

他のもの：ng-modelを最初の入力要素に2回追加しました。

そして、主な問題は、ng-repeatの各項目をeで参照し、ループ内でitem.selectedを使用していることです。あなたはe.selectedたりng-repeat定義を変更を使用する必要があります場合は

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

OR

<li class="item item-checkbox" ng-repeat="item in inventory"> 

あなたがitem.priceとitem.titleにe.priceとe.titleを変更する必要があり、後者で行きます。

Answer 2

あなたは声明で、本当にハードに凝視した場合：

if ($scope.selectedAll) { 
    $scope.selectedAll = true; 
} else { 
    $scope.selectedAll = false; 
} 

あなたは割り当てが重複していることに気づくかもしれません：それはすでにfalseある場合はtrueにそれを設定しているの場合は、すでにtrue、およびfalseです。

一般的に、angleが期待したことをしない場合、関連するスコープメソッドでブレークポイントを設定してコードをデバッグするのは非常に簡単で、このようなバグの原因を特定するのに役立ちます。

Answer 3

私はむしろ、関数を入力要素に入れることはしません。あなたができることは、selectAllチェックボックスでモデルを作成し、ブール値を取り込み、そのブール値をng-ifで使用して他のフィールドのチェックを外すことです。私の言いたいことが分かりますか？