AngularJS - 如何在 ng-repeat 中正确使用 ng-show？我的布尔值没有更新答案

【问题标题】：AngularJS - How to correctly use ng-show inside a ng-repeat? My boolean isn't getting updatedAngularJS - 如何在 ng-repeat 中正确使用 ng-show？我的布尔值没有更新
【发布时间】：2018-05-25 21:27:26
【问题描述】：

我有一个循环超过 9 个 div 的 ng-repeat，每个 div 都有不同的颜色。

当用户点击一个 div 时，它的颜色将成为一个部分的背景颜色。

我正在尝试这样做：

重复的数组结构如下：

interface colorBoxes {
    color: string;
    isSelected: boolean;
  }

在视图中：

  <div ng-repeat="s in vm.colorBoxes track by $index">
        <div class="pointer" ng-click="w.backgroundColor = s.color; vm.pickColor(s, $index)" ng-style='{"background-color": s.color}'>
            <i ng-show="vm.isColorSelected($index) === true" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
        </div>
    </div>

在控制器中：

pickColor(array: any, index: number) {
      for(var i = 0; i<=this.colorBoxes.length; i++) {
        this.colorBoxes[i].isSelected = false;
      }
      array[index].isSelected = true;
    }

我使用这个函数，所以当你点击一个 DIV 时，它的变量：isSelected 变为 true，而所有其他 DIV 的变量都设置为 false。

我在带有 ng-show 的视图中使用此变量，以在当前选择的 DIV 上显示一个复选标记，但这不起作用，在我放入该 ng-show 的函数下方

isColorSelected(index:number):boolean {
      return this.colorBoxes[index].isSelected
    }

我做错了什么？

总而言之，我希望当您单击一个框时，它的颜色字符串会应用于另一个元素（与我的代码一起正常工作），然后，该框需要在其顶部显示一个复选标记，我尝试使用上述功能，通过在单击时将isSelected var 设置为 true，但它不起作用。

我很确定问题是 Angular 没有检查该 ng-show 中的更改，我只是不知道如何让它检查更改，也许有一种更简洁的方法来获取什么我正在努力！

谢谢

添加小提琴：http://jsfiddle.net/7zymp2gq/1/

【问题讨论】：

为什么在函数中使用this.colorBoxes而不是vm.colorBoxes？
添加了 jsFiddle jsfiddle.net/7zymp2gq/1
@Gobli 因为在这个项目中我们将控制器的 vm 更改为 this，我们只在视图中使用 vm 来调用控制器中的东西

标签： angularjs twitter-bootstrap

【解决方案1】：

好的，这里你的代码已经修复并且可以工作了：

http://jsfiddle.net/7zymp2gq/4/

函数$scope.pickColor 基本上有两处问题：

循环进入不存在的字段，我已将<= 更改为<
它正在更新array[index]，它应该正在更新$scope.colorBoxes[index]

【讨论】：

天哪，这么简单，嗯？使用 $scope.colorBoxes[index] 而不是 array[index] 有什么区别？正如我把数组（colorBoxes）作为参数，所以两个版本应该是一样的？对于循环，菜鸟的错误，谢谢！！最后一件事，这是解决我的问题的最佳方法吗？我不确定使用 for 循环是最好的，也许 Angular 有一些方法可以解决我想要做的事情！还是谢谢你，把你的答案标记为正确的
您输入的参数是“s”，即数组的单个元素，而不是整个数组，如果您想传递整个数组，您应该传递“colorBoxes”，但我认为它是这样更好。关于循环， for 非常好，但如果你想将它减少到一行，你可以做 "$scope.colorBoxes.forEach(function(el){el.isSelected = false;}) "
有点难看的是在做 ng-show="vm.isColorSelected($index) === true"。因为 ng-show 与布尔值一起使用，所以没有必要，您可以执行 ng-show="vm.isColorSelected($index)"
感谢您的完整回答！我更改了 ng-show 并使其更清洁，并感谢您的解释！我现在明白为什么我不能把“s”作为参数，因为“s”只是循环数组的当前元素！另一个菜鸟错误 :D 再次感谢您！

【解决方案2】：

您可以使用isSelected 属性，而不是使用ng-show 的函数：

<div ng-app="app" ng-controller="Ctrl">
  <div class="class1" ng-repeat="s in colorBoxes track by $index">
    <div class="pointer class2" ng-click="pickColor(colorBoxes,$index);" ng-init="lastselected=s.isSelected?$index:null" ng-style='{"background-color": s.color}'>
      <i ng-if="s.isSelected" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
    </div>
  </div>

  <div class="changeColor" ng-style='{"background-color": chosenColor}'></div>     
</div>

Check this demo.

【讨论】：