时间戳

首页 > 解决方案 > AngularJS - 如何在 ng-repeat 中正确使用 ng-show？我的布尔值没有更新

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

问题描述

我有一个循环超过 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/

标签： angularjstwitter-bootstrap

解决方案

好的，在这里您的代码已修复并可以正常工作：

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

该功能基本上有两点错误$scope.pickColor：

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

推荐阅读