Angularjsスコープ変数が予想通りに更新されない

ここにPlunkerのプレビューがあります。Angularjsスコープ変数が予想通りに更新されない

Index.htmlと

<body ng-controller="MainCtrl"> 

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll('allSelected')" ng-checked="allChecked"> <br> <br> 

Slave1 : <input type="checkbox" id="slave1" ng-click="checkAll('slave1')" ng-checked="selectedAll" > <br> 
Slave2 : <input type="checkbox" id="slave2" ng-click="checkAll('slave2')" ng-checked="selectedAll" > <br> 
Slave3 : <input type="checkbox" id="slave3" ng-click="checkAll('slave3')" ng-checked="selectedAll" > <br> 
Slave4 : <input type="checkbox" id="slave4" ng-click="checkAll('slave4')" ng-checked="selectedAll" > <br> 
Slave5 : <input type="checkbox" id="slave5" ng-click="checkAll('slave5')" ng-checked="selectedAll" > <br>

app.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.checkAll = function(id) { 

    // First Condition 
    if (id === "allSelected" && document.getElementById(id).checked) { 
    // $scope.selectedAll = false; 
     $scope.allChecked = true; 
     $scope.selectedAll = true; 
    } 

    // Second Condition 
    if (id === "allSelected" && !document.getElementById(id).checked) { 
     $scope.allChecked = false; 
     $scope.selectedAll = false; 
    } 

    // Third Condition 
    if (id !== "allSelected" && !document.getElementById(id).checked) { 
     $scope.allChecked = false; 

    } 


    }; 
});

は条件1を参照してください。期待通りに動作しません。

問題をよりよく理解するために、ここに画像をアップロードしています。

第1の画像と第二画像との差分をチェックアウト。スレーブチェックボックスのチェックを外した後、マスターチェックボックスのチェックが外されますが、その直後にマスターチェックボックスを再度クリックすると（2番目の画像参照）、特定のスレーブチェックボックスは未チェックです。どうして？

私がここでやっていることは間違っていますか？このコードを期待どおりに動作させるには？

出典

2016-04-30 Abhi

あなたはあなたは$ SCOPE変数でそれを行うことができます.2つの方法でバインディングが問題を解決します。 –

@ngDeveloper私はそれを得ましたが、あなたが手がかりを取ったり、いくつかの例を教えてくださいなぜなら、私は角度がないからです。 – Abhi

ok.in数分 –

I再書いたあなたの例：

HTML：

<div ng-controller="MyCtrl"> 
    Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()" ng-model="masterCheckbox"> <br> <br> 

    <div ng-repeat="checkbox in checkBoxes"> 
     {{checkbox.name}} : <input type="checkbox" id="slave5" ng-click="check(checkbox)" ng-model="checkbox.value" /> <br/> 
    </div> 
</div>

JS：

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.checkBoxes = [ 
     { name:'Slave1', value: false }, 
     { name:'Slave2', value: false }, 
     { name:'Slave3', value: false }, 
     { name:'Slave4', value: false }, 
     { name:'Slave5', value: false } 
    ]; 

    $scope.checkAll = function() { 
     angular.forEach($scope.checkBoxes, function(item){ 
      item.value = $scope.masterCheckbox; 
     }); 
    }; 

    $scope.check = function() { 
     var result = true; 
     angular.forEach($scope.checkBoxes, function(item){ 
      if(!item.value) result = false; 
     }); 
     $scope.masterCheckbox = result; 
    }; 
}

jsfiddle example

出典

2016-04-30 11:48:39 MaKCbIMKo

これは完璧です。 – Abhi

<body ng-controller="MainCtrl"> 

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()" ng-model="allChecked"> <br> <br> 

Slave1 : <input type="checkbox" ng-model="checboxes['slave1']"> <br> 
Slave2 : <input type="checkbox" ng-model="checboxes['slave2']"> <br> 
Slave3 : <input type="checkbox" ng-model="checboxes['slave3']"> <br> 
Slave4 : <input type="checkbox" ng-model="checboxes['slave4']"> <br> 
Slave5 : <input type="checkbox" ng-model="checboxes['slave5']"> <br>

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.checkAll = function() { 
    if($scope.allChecked){ 
     for(var i in $scope.checkboxes){ 
     $scope.checkboxes[i] = true; 
     } 
    } 
    }; 
});

出典

2016-04-30 11:31:12

あなたはこのことについて間違った道を進みました。角度入力値はng-modelを使用して保存/取得されますが、angular docsまたはw3schoolsのいずれかで読み上げることをおすすめします。基本的な考え方は、入力のngモデルを設定すると、angle自体が入力値を追跡し、変更時にそれを更新することです（したがって、チェックボックスのidは必要ありません）。また、私はあなたがあなたの例では、チェックボックス（スレーブチェックボックスを繰り返してきたときにことを指摘したい

Slave 1: <input ng-change="unselect()" type="checkbox" ng-model="slave.selected"></br> 
/// etc.

：に

Master Checkbox : <input ng-change="selectAll(allSelected)" type="checkbox" ng-model="allSelected">

およびその他のチェックボックス：

はにあなたのマスターチェックボックスを変更してみてください）通常、あなたはhtmlでそれらをすべてリストしません。コントローラーに配列を作成し、ng-repeatを使用してすべてのチェックボックスを出力します。ここplunkrです：http://plnkr.co/edit/w50WALj4Y0MtVVYX5TaV?p=preview

出典

2016-04-30 11:32:22

Angularjsスコープ変数が予想通りに更新されない

答えて

関連する問題