在angularjs中过滤ng-repeat中数组的第一个值答案

【问题标题】：Filter first value of array inside ng-repeat in angularjs在angularjs中过滤ng-repeat中数组的第一个值
【发布时间】：2016-03-11 09:59:30
【问题描述】：

如何使用angularjs 过滤ng-repeat 内的josn 行的第一个元素。我被这个困住了。

我的示例代码是::

<!DOCTYPE html>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
 <div ng-app="myApp" ng-controller="namesCtrl">
  <div>
    <div ng-repeat="x in num| orderBy:'n'">
     <b>{{x.n}}</b>
     <div ng-repeat="y in amt | orderBy:'v'">
       <div ng-if="x.n==y.n">
         <div>{{y.v}}</div>
       </div>
      </div >
    <br />
    </div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.num= [
    {n:'3'},
    {n:'1'},
    {n:'2'},
    ];

$scope.amt= [
    {n:'1',v:'23'},
    {n:'1',v:'24'},
    {n:'1',v:'45'},
    {n:'2',v:'56'},
    {n:'2',v:'67'},
    {n:'2',v:'45'},
    {n:'3',v:'23'},
    {n:'3',v:'67'},
    {n:'3',v:'19'},
    ];

 });
 </script>

 </body>
 </html>

结果是
1
23
24
45

2
45
56
67

3
19
23
67

我只是结果。第一个值。

喜欢：
1
23

2
45

3
19

请帮忙...

【问题讨论】：

这种策略效率很低：它为每个 x.n 循环遍历整个 amt 数组，只显示单个元素。为什么在 JS 代码中一次找不到想要显示的元素呢？
请参考此链接可能对您有用。 http://stackoverflow.com/questions/32570661/angularjs-multiple-ng-repeats-on-single-row-of-table

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

您应该创建自定义过滤器功能：

$scope.myFilter = function (x) {
  return function (y) {
    if (x.n==y.n) {
      return true;
    } else {
      return false;
    }
  }
};

在内部 ng-repeat 中使用它：

 <div ng-repeat="y in amt | orderBy:'v' | filter:myFilter(x) | limitTo:1">
   <div>{{y.v}}</div>
 </div >

此外，要获得前 1 个结果，请添加标准 limitTo 过滤器 (limitTo:1)，第一个参数设置最大返回计数。

【讨论】：

这对我来说是完美的……这段代码解决了我的多个问题……谢谢 Slava

【解决方案2】：

(...) < /tr> < /thead> < tbody> < tr ng-repeat="object in objects | SOME_FILTER"> (...) {{object.get("element")}} {{(object.get("element2")).innerElement}} (...) < /tr> < /tbody> < /table> (...)

三个点表示有一些代码被删掉了。 “element2”是里面有 JSON 的那个。 “innerElement”是关键。它对我有用，希望对某人有用

【讨论】：

感谢您抽出宝贵时间回答。尝试正确格式化代码并添加更多解释