AngularJSがハイパーリンクのng-clickイベントで自分のチェックボックスをチェックしていません

Question

私のチェックボックスにAngular（1.5）を使ってチェックを入れていない奇妙なシナリオがあります。私はクロムBatarangをチェックして、それはまだ私のリンクをクリックすると、私のチェックボックスがチェックされていない大丈夫だと思われる！

私はng-repeatを使って表示される配列を持っています。 ng-repeat内には、チェックボックスと、チェックボックスを制御したいハイパーリンクがあります。

ハイパーリンクがチェックボックスをチェックしていない理由を誰でも見ることができますか？

すべてこの方法がやっている

<tr ng-repeat="o in vm.myArray track by o.Id"> 
    <td> 

     <!-- This works (changes the checkbox to checked)--> 
     <a href ng-click="o.Highlight=true">Just to test it (this works)</a> 

     <input type="checkbox" ng-model="o.Highlight" ng-click="vm.highlight(vm.myArray.Days, o.Name);" style="width: 15px" /> 

     <!-- This fails (I'm expecting it to check the checkbox) --> 
     <a href ng-click="vm.highlight(vm.myArray.Days, o.Name)"> 
      {{o.Name}} 
     </a> 
    </td> 

</tr> 

マークアップは、その後のものを制御するために使用されるプロパティ「ハイライト」（boolean）を持つオブジェクトの配列を反復処理される多くのおかげでは、 UIでハイライトプロパティでチェックボックスをオンにするかどうかを制御します。

このメソッドがChromeのbatarangで行っていることを見ると、Highlightプロパティが正しく設定されていますが、これはチェックボックスを切り替える必要がありますが、何らかの理由でそうではありません。コントローラで

ハイライト方式

(function() { 
    "use strict"; 

    angular.module("bla").controller("homeCtrl", ["stuff", function (stuff) { 
    var vm = this; 
    vm.highlight = highlight; 

    // Iterate through array and if the fieldToHighlight matches the item.Name then toggle the item as highlighted. 
    function highlight(collection, fieldToHighlight) { 

     for (var i = 0; i < collection.length; i++) { 
      var element = collection[i]; 

      if (element.Items != null) { 
       for (var counter = 0; counter < element.Items.length; counter++) { 
        var item = element.Items[counter]; 

        if (fieldToHighlight == item.Name) { 
         if (item.Highlight) { 
          item.Highlight = false; 
         } 
         else { 
          item.Highlight = true; 
         } 
        } 
       } 
      } 
     } 
    } 

更新クロム

のコメント

角プラグインした後にこれがハイライトプロパティがfalseのonloadに設定されることを示します。テストハイパーリンクをクリックすると、Highlightプロパティが正しくtrueに変更されます。

angular plugin for chrome showing property correct data type

アップデート2 - クロムのデバッグは、私が失敗したハイパーリンクをクリックしたときに、このデバッグポイントだった正しく

の値を設定していることを示します。コメントの後に

code being debugged showing the highlight is working even though the ui is now updating

アップデート（2016年12月13日）のコードで

コメント

<tr ng-repeat="o in vm.myArray track by o.Id"> 
    <td> 
     <!-- checkbox --> 
     {{o.Highlight}} 
     <!-- clicking this changes the echo'ed variable immediately above but doesn't toggle the UI behaviour that relies on o.Highlight --> 
     <input type="checkbox" ng-click="vm.highlight(o);" ng-model="o.Highlight" /> 

     <!-- name --> 
     <!-- clicking this toggles the right behaviour in the UI which relies on the o.Highlight property but it doesn't toggle the checkbox to be checked or unchecked --> 
     <a href ng-click="vm.highlight(o)">{{o.Name}}</a> 
    </td> 
</tr> 

Answer 1

私はあなたのためにいくつかの質問といくつかの答えを持っている:-)

1. ng-repeat 、アレイvm.myArrayは vm.highlight()vm.myArray.Days方法にvm.myArrayは後者でobjectように使用される を渡されて、一方、使用されています。問題は、を配列としてng-repeatに、そしてclickイベントのオブジェクトとして使用した理由です。
2. このメソッドの内部では、o.Nameが渡され、 vm.myArray.Days[0].Items[0].Nameのような深いレベルのプロパティを持つ がチェックされます。比較のために2つの異なる形式の がある理由

これらの質問に答えるにはmyArrayコレクションを投稿してください。

とにかく、私はmyArray扱う場合は、配列ではなく（正しくはなく、クリックイベントをごng-repeat作品を想定して）オブジェクトですが、私は以下の回答を提案することができます（すべて同じように、しかし、種類の異なる方法でそれが表しています）。

回答1：

あなたは（あなたのために働く）上記の最初のリンクをしようとしたとして、あなたが望むすべてがちょうどトグルであれば、あなたは、以下のように代わりo.Highlight=trueのトグルo.Highlight=!o.Highlightを試すことができます。

<a href ng-click="o.Highlight=!o.Highlight">Just to test it (this works)</a> 

回答2：

それでもあなたは他のタスクを実行するために同じトグルをしたいが、コントローラ内部の機能であれば、あなたは以下のように行うことができ、

<a href ng-click="vm.highlight(o)">{{o.Name}}</a> 

function highlight(obj) { 
    obj.Highlight = !obj.Highlight; 
} 

回答3：

ただし、プロパティを確認する場合はName配列に対して、以下のようにすることができます。

<a href ng-click="vm.highlight2(vm.myArray, o)">{{o.Name}}</a> 

function highlight2(collection, obj) { 
    for (var i = 0; i < collection.length; i++) { 
    var item = collection[i]; 
    if (obj.Name == item.Name) { 
     obj.Highlight = !obj.Highlight; 
    } 
    } 
} 

注：無効な配列または異なる構造を持っている場合は、vm.myArray

サンプルスニペットのサンプルデータをポストする必要がある場合は、その後、上記の3つの答えはあなたのために動作しない場合があります。

(function() { 
 
    "use strict"; 
 
    angular.module("bla", []); 
 
    angular.module("bla").controller("homeCtrl", [ function() { 
 
    var vm = this; 
 
    vm.highlight = highlight; 
 
    vm.highlight2 = highlight2; 
 
     
 
    vm.myArray = [{Id: 1, Name: 'Item 1'}, {Id: 2, Name: 'Item 2'}, {Id: 3, Name: 'Item 3'}]; 
 

 
    // Iterate through array and if the fieldToHighlight matches the item.Name then toggle the item as highlighted. 
 
    function highlight(obj) { 
 
     obj.Highlight = !obj.Highlight; 
 
    } 
 
     
 
    function highlight2(collection, obj) { 
 
     for (var i = 0; i < collection.length; i++) { 
 
     var item = collection[i]; 
 
     if (obj.Name == item.Name) { 
 
      obj.Highlight = !obj.Highlight; 
 
     } 
 
     } 
 
    } 
 
     
 
    /*function highlight(collection, fieldToHighlight) { 
 

 
     for (var i = 0; i < collection.length; i++) { 
 
      var element = collection[i]; 
 

 
      if (element.Items != null) { 
 
       for (var counter = 0; counter < element.Items.length; counter++) { 
 
        var item = element.Items[counter]; 
 

 
        if (fieldToHighlight == item.Name) { 
 
         if (item.Highlight) { 
 
          item.Highlight = false; 
 
         } 
 
         else { 
 
          item.Highlight = true; 
 
         } 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }*/ 
 
     
 
}]); 
 
    
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="bla"> 
 
<table ng-controller="homeCtrl as vm"> 
 
    <tr ng-repeat="o in vm.myArray track by o.Id"> 
 
    <td> 
 

 
     <!-- This works (changes the checkbox to checked)--> 
 
     <a href ng-click="o.Highlight=!o.Highlight">Just to test it (thistoggle works)</a> 
 

 
     <input type="checkbox" ng-model="o.Highlight" ng-click="vm.highlight(o);" style="width: 15px" /> 
 
     Link 1: 
 
     <a href ng-click="vm.highlight(o)"> 
 
      {{o.Name}} 
 
     </a>&nbsp; 
 
     Link 2: 
 
     <a href ng-click="vm.highlight2(vm.myArray, o)"> 
 
      {{o.Name}} 
 
     </a> 
 
    </td> 
 

 
    </tr> 
 
</table> 
 
</div>