ng-repeat中的独特计数器

Question

我有这张有15行的桌子。

码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="item in myObj">
  <td>{{$index +1}}</td>
  <td>{{item.Name}}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myObj = [    {
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    },
    {
      "Name": "Ana Trujillo Emparedados y helados",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Antonio Moreno Taquería",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Around the Horn",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "B's Beverages",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    },
    {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    },
    {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    },
    {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    },
    {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }]
});
</script>

</body>
</html>

这是输出：

假设我删除了数组中的一个对象，总行数为14而当我向数组中添加一个对象时，它将返回15 。 那是预料之中的。

现在我要做的是， WITHOUT使用控制器，一切都在VIEW完成； 在删除对象并将其添加回之后，我希望该行将显示为16而不是15 。 我的意思是$index应该增加而不是减少。

我已经用控制器完成了，但是有可能只在视图中完成吗？

感谢您的宝贵时间和任何提前的帮助。

Answer 1

您可以“软删除”该行。 您可以将其标记为已删除，而不是从阵列中实际删除它。 然后，随着您添加项目，计数将继续增加：

function softDelete(item) {
  item.deleted = true;
}

我不知道为什么您不想使用控制器，但是这也可以在视图中完成：

<tr ng-repeat="item in myObj" ng-click="item.deleted = true" ng-hide="item.deleted">
  <td>{{$index +1}}</td>
  <td>{{item.Name}}</td>
</tr>

这是一个矮人展示：

https://plnkr.co/edit/yuAIXn5Pe9YbwxXW2qih?p=preview

ng-repeat中的独特计数器

问题描述

1 个解决方案

解决方案1
1 2016-09-21 19:07:49

ng-repeat中的独特计数器

问题描述

1 个解决方案

解决方案1 1 2016-09-21 19:07:49

解决方案1
1 2016-09-21 19:07:49