Question

我有一系列元素，我需要在推送一个新元素后使最后一个项目变得时尚。

这是我的阵列：

$scope.items = [{id: 1, name: "Jhon Doe"}, {id:2, name: "Susane"}];

在我看来，数组绑定到ng-repeat：

<div ng-repeat="item in items track by $index">
    <div id="item-{{ $index }}">
         {{ item.name }}
    </div>
</div>

当数组更新时，我需要将一些样式应用到最后一项，动态添加，我使用jQuery：

$scope.add = function(){
   var item = { id:10, name: 'Martha' };
   $scope.items.push(item);

   jQuery('#item-' + ($scope.items.length - 1) ).css('background', 'red');
}

但它不起作用，因为我认为DOM在推送时尚未更新。我曾尝试使用$scope.watchCollection，但它不起作用。

感谢您的回答。

Answer 1

你需要摆脱jQuery的思维方式（首先是DOM）并进入有条理的思维方式......更新数据模型并让角度管理DOM。

使用$last的子范围中创建的ng-repeat属性，方式与$index相同。你不应该需要元素ID，但很少需要角色

<div ng-repeat="item in items track by $index">
  <div ng-class="{'red-class': $last}">
     {{ item.name }}
  </div>
</div>

我建议你从项目中完全删除jQuery，除非你有一个非常具体的插件需要它

在推动AngularJs之后更改ng-repeat更新时的样式

1 个答案: