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>

所有这个方法都在迭代一个具有属性的对象数组＆＃34;突出显示＆＃34; （布尔值）然后用于控制UI中的内容。我希望Highlight属性控制是否选中该复选框。

观看此方法在Chrome浏览器中的作用，正确设置了突出显示属性，反过来应切换复选框，但出于某种原因，它不是。

突出显示控制器中的方法

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

评论后更新

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

评论后更新（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

我几乎没有问题和答案： - ）

在ng-repeat中，正在使用数组vm.myArray，而对于正在传递vm.highlight()方法vm.myArray.Days 其中vm.myArray的使用方式与object相同。问题是您在myArray中使用ng-repeat作为数组并在click事件中使用对象的原因。
同样在此方法中，检查传递的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;
    }
  }
}

注意：如果您的阵列无效或结构不同，那么您必须发布vm.myArray

示例代码：

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

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

1 个答案: