Question

当我尝试在文本发生变化时更改li的背景色时，会出现这种情况。从我被引导到的另一个post，我找到了一种看起来很理想的方法，并添加到我的plunker example。

所以，这里的主要代码是在这个指令中......

 .directive('animateOnChange', function ($timeout) {       
   return function (scope, element, attr) {

     scope.$watch(attr.animateOnChange, function (nv, ov) {
    if (nv != ov) { // change to true and this works
      element.addClass('changed');
      $timeout(function() {
        element.removeClass('changed');
      }, 500); // Could be enhanced to take duration as a parameter
    }
  });
};
})

单击按钮时，属性会更新，但我们不会更改颜色，因为nv行的ov和if (nv != ov)的值始终相同（如果您只用nv != ov替换true我们可以看到颜色变化，这也会在初始化时发生，我真的不想要。

所以问题是为什么我的旧值和新值（ov，nv）总是一样的？

非常感谢任何帮助。

Answer 1

所以你有一个阵列。要检测数组中的更改，最好使用$ scope。$ watchCollection（）。

您还应该使用ng-class指令来设置和删除DOM元素中的类。如果要更改元素的背景颜色，可以使用

ng-class="{'bg-green': textUpdated}"

'bg-green'在你的css中是哪种风格：

.bg-green{background-color: green;}

'textUpdated'是您在“更新”方法中设置的模型中的标记。

使用ng-class还可以使用角度动画。示例位于ng-class文档页面的底部。

Answer 2

我找到了一种方法来完成上述工作。我要做的是在properties集合中存储对象，而不仅仅是文本。即而不是scope.properties.push("Location A")，我使用scope.properties.push(new Property ("Location A"))，其中所有Property都使用text属性构造一个对象。

 function Property(text){        
    this.text = text;
  }

在标记中我会观察并更新此文本属性..

<div class="carul" ng-repeat="p in properties" animate-on-change="p.text">{{p.text}}</div>

现在ov和nv仅对初始化和所有其他更新（即通过按下按钮）相等，它们包含预期的旧值和新值。

我不确定为什么我需要包装一个对象（不是我担心不得不），但是如果有人确实对为什么做了评论会感兴趣。

我现在也只使用一个<div>而不是<ul>（并不是说这与问题有关，只是意识到这里不需要<ul> ）。

可以看到上述修改here。

当用于观看李

2 个答案: