Question

我看过很多关于在文本更改时动画属性（例如背景颜色）的帖子，使用$ watch，但是如何为列表项执行此操作（在指令链接函数中）文字改变了。

所以，如果我有css ..

.lion li{     
background: yellow;
-webkit-transition: background 1s; 
transition: background 1s;
}

在html中，该指令附加到我有

<ul ng-repeat="p in properties">
    <li>{{p}}</li>                
</ul>

在另一篇文章中，我看到了添加和删除课程的建议，但似乎并不适用于我。

我在链接功能中尝试了以下内容......

function link(scope, element, attrs) {              
  scope.properties = [];
  scope.properties.push("Prop 1");
  scope.properties.push("Prop 2");
  scope.properties.push("Prop 3");
  scope.properties.push("Prop 4");

  scope.$watch('properties[0]', function () {        
    element.addClass('lion');              
    element.removeClass('lion');        
  });
};

如果我从外部更改属性[0]上的文本，则调用watch函数。但是 3 问题在这里。

首先，背景变化似乎没有消失然后消失
如果我删除了removeClass，那么我可以看到背景变为黄色，所有的lis都被着色而不仅仅是更改过的。
我希望我不需要为每个列表位置添加一个$ watch，例如我刚刚在索引0处完成，但我想在任何索引处应用这个li

我会在Plunker再次启动时更新现有示例（它似乎处于脱机状态）。同时，有没有人有任何其他建议呢？

提前感谢任何建议。

Angular：如何在文本更改时为ul列表项的背景颜色设置动画

0 个答案: