AngularJS 没有通过超链接 ng-click 事件检查我的复选框

Question

我有一个奇怪的场景，我的复选框没有使用 Angular (1.5) 勾选。我已经检查了 chrome 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>

这个方法所做的只是遍历一个对象数组，这些对象具有属性“Highlight”（布尔值），然后用于控制 UI 中的内容。我希望 Highlight 属性控制复选框是否被选中。

观察这个方法在 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;
                        }
                    }
                }
            }
        }
    }

cmets 后更新

Chrome 的 Angular 插件

这表明 Highlight 属性设置为 false onload。当我单击测试超链接时，Highlight 属性正确更改为 true。

angular plugin for chrome showing property correct data type

更新 2 - 显示 chrome 调试正在正确设置值

这个调试点是当我点击失败的超链接时。

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

cmets 后更新（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 中使用myArray 作为数组并在点击事件中使用对象。
2. 同样在这个方法里面，检查o.Name被传递 具有深层属性，例如 vm.myArray.Days[0].Items[0].Name。为什么有两种不同的 比较格式。

您应该发布myArray 集合来回答这些问题。

无论如何，如果我认为 myArray 是一个数组而不是一个对象（假设您的 ng-repeat 工作正常，但点击事件不能正常工作），我可以建议以下答案（都一样，但它代表的方式有点不同)。

答案 1：

当您尝试使用上面的第一个链接（对您有效）时，您可以尝试切换 o.Highlight=!o.Highlight 而不是下面的 o.Highlight=true，如果您想要的只是一个切换。

<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;
    }
  }
}

注意：如果您的数组无效或结构不同，则上述 3 个答案可能不适合您，您必须发布 vm.myArray 的示例数据

示例 sn-p：

(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>