Question

我有一个ng-repeat循环超过9个div，每个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变为真，而所有其他DIV的变量都设置为假。

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

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

我做错了什么？

总结一下，我希望当你点击一个框时，它的颜色字符串会被应用到另一个元素（这与我的代码一起正常工作），然后，那个框需要在它上面显示一个复选标记，我尝试使用上述函数，通过在单击时将isSelected var设置为true，但它不起作用。

我很确定问题是角度没有检查ng-show的变化，我只是不知道如何让它检查变化，也许有一种更清洁的方法来获取什么我正在努力做到！

谢谢

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

Answer 1

好的，您可以在这里修复并运行代码：

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

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

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

Answer 2

您可以使用ng-show属性：

，而不是在isSelected使用函数

<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

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

2 个答案: