Question

我有简单的列表（json数据来自服务器）但是在示例中我只是将数据添加到局部变量中并将其呈现为<table>。我想在列表中添加新项目，并使用突出显示单元格向用户显示新项目。问题是我使用orderBy订购列表，因此我不知道新添加元素的位置。

简单列表数据

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

控制器：

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

Answer 1

您可以在范围中再添加一个值，以区分新行并为其应用样式。

<强> 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>

<强> JS

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

演示：http://plnkr.co/edit/1eZneQwzRWLubcjNnBln?p=preview

Answer 2

你可以用老式的方式来循环你的项目并取消设置某个fresh标志并仅为你的新项目设置它。

Here's an updated Plunk.

addOptions变为：

  $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);

  };

模板更新（添加了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>

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

2 个答案: