使用orderBy突出显示ng-repeat中的新元素

I have simple list (json data comes from server) but in example I just added the data in local variable and render it into <table>. I want to add new item into the list and show the user newly item with Highlight cell.Problem is that i order the list with orderBy so I don't know the position of newly added element.

我有简单的列表(json数据来自服务器)但是在示例中我只是将数据添加到局部变量中并将其呈现到

中。我想在列表中添加新项目,并使用Highlight cell显示用户新项目。问题是我用orderBy命令列表,所以我不知道新添加元素的位置。

Simple List data

简单列表数据

$scope.options = [
    {'title' : 'Title1', 'label' : 'Zip code', 'type' : 'xxx' },
    {'title' : 'Title2', 'label' : 'MD', 'type' : 'title1'},
    {'title' : 'Title3', 'label' : 'DMS', 'type' : 'title2'}
];

Controller:

function Ctrl($scope) {
  $scope.options = [
    {'title' : 'Title1', 'label' : 'Zip code', 'type' : 'xxx' },
    {'title' : 'Title2', 'label' : 'MD', 'type' : 'title1'},
    {'title' : 'Title3', 'label' : 'DMS', 'type' : 'title2'}
];
  $scope.addOptions = function(op){
    $scope.options.push(angular.copy(op));
  };
}

HTML:

<div ng-controller="Ctrl">
  <table border="1">
  <tr ng-repeat="option in options| orderBy:'title'">
    <td>{{option.title}}</td>
    <td>{{option.label}}</td>
    <td>{{option.type}}</td>
  </tr>
  </table>
  <input type="text" id="name" name="name" ng-model="item_add.title" /><br>
  <input type="text" id="name" name="name" ng-model="item_add.label" /><br>
  <input type="text" id="name" name="name" ng-model="item_add.type" /><br>
  <input type="button" value="Add" ng-click="addOptions(item_add)"/>
</div>

Simple Plunker:- http://plnkr.co/edit/3rOgopGompRBFruLAZC4?p=preview

简单的Plunker: - http://plnkr.co/edit/3rOgopGompRBFruLAZC4?p=preview

2 个解决方案

#1

You can add one more value in scope for differentiating the new row and apply style for the same.

您可以在范围中再添加一个值,以区分新行并应用相同的样式。

HTML

<table border="1">
  <tr ng-repeat="option in options| orderBy:'title'" ng-class="{'newitem':option.newlyAdded}">
    <td>{{option.title}}</td>
    <td>{{option.label}}</td>
    <td>{{option.type}}</td>
  </tr>
  </table>

  $scope.addOptions = function(op){
    op.newlyAdded = true;
    $scope.options.push(angular.copy(op));
  };

Demo: http://plnkr.co/edit/1eZneQwzRWLubcjNnBln?p=preview

#2

You could do it the old fashioned way where you loop over your items and unset a certain fresh flag and set it only for your new item.

你可以用老式的方式做到这一点,你循环你的物品,取消设置一个新鲜的旗帜,只为你的新项目设置它。

Here's an updated Plunk.

这是一个更新的Plunk。

addOptions becomes:

  $scope.addOptions = function(op){
    angular.forEach($scope.options, function(opt) {
      opt.fresh = false;
    })
    var newOpt = angular.copy(op);
    newOpt.fresh = true;
    $scope.options.push(newOpt);

  };

Template update (added ng-class):

模板更新(添加ng-class):

  <tr ng-repeat="option in options| orderBy:'title'" ng-class="{fresh: option.fresh}">
    <td>{{option.title}}</td>
    <td>{{option.label}}</td>
    <td>{{option.type}}</td>
  </tr>

#1