AngularJs 从过滤列表中显示第一个和最后一个答案

【问题标题】：AngularJs show first and last from filtered listAngularJs 从过滤列表中显示第一个和最后一个
【发布时间】：2016-01-16 19:13:47
【问题描述】：

从数组中过滤空字符串后，只显示第一个和最后一个重复元素。

我的代码：

var myApp = angular.module('myApp', []);

myApp.controller("myCtrl", function ($scope, $window) {
    $scope.items = [
        { name: "item1", color: "green", form: "" },
        { name: "item2", color: "", form: "circle" },
        { name: "item3", color: "red", form: "" },
        { name: "item4", color: "", form: "oval" },
        { name: "item5", color: "blue", form: "" },
        { name: "item6", color: "", form: "square" },
        { name: "item7", color: "yellow", form: "" },
        { name: "item8", color: "", form: "rectangle" }     
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
<div ng-repeat="item in items" ng-if="item.form == ''">
    {{item.name}}-{{item.color}}
</div>
<br />
<div ng-repeat="item in items" ng-if="item.color == ''">
    {{item.name}}-{{item.form}}
</div>
<br />
</body>

但我只需要显示列表中的第一个和最后一个元素。前任。在第一个列表中：item1-green 和 item7-yellow（item3-red 和 item5-blue 必须隐藏），第二个列表 item2-circle 和 item8-rectangle。

【问题讨论】：

如果一组只有颜色，而另一组只有形式（形状），为什么要将它们组合成一个列表？另外，ng-if 不是过滤器。
请显示预期结果。不清楚目标是什么
目标是只显示每个列表中的第一个和最后一个元素。

标签： angularjs angularjs-ng-repeat ng-show angular-ng-if

【解决方案1】：

如果您只想显示 ng-repeat 内的项目的第一个和最后一个元素，您可以使用 ng-repeat 模板的 $first 和 $last 变量，如果它们为真，则表明 $first 和 $last 出现。

<div ng-repeat="item in items" ng-if="$first || $last">
    {{item.name}}-{{item.form}}
</div>

更新

对于这种情况，您应该更喜欢做自定义过滤器，它将接受array、propertyName 和valueToCheck。最后它将返回第一个和最后一个元素

HTML

<div ng-repeat="item in items| returnFirstAndLastValue: 'form': ''">
   {{item.name}}-{{item.color}}
</div>
<div ng-repeat="item in items| returnFirstAndLastValue: 'color': ''">
   {{item.name}}-{{item.form}}
</div>

过滤器

myApp.filter('returnFirstAndLastValue', function(){
  return function(array, prop, valueToCheck){
    var length = (array || []).length, tempOutput = [];
    angular.forEach(array, function(ele, index){
      if(ele[prop] === valueToCheck)
        tempOutput.push(ele);
    })
    return tempOutput.filter(function(element, index){
      if(index == 0 || index == (tempOutput.length - 1) )
        return element;
    })
  }
})

Demo Here

【讨论】：

此示例显示默认数组中的第一个和最后一个元素，但我需要过滤后的数组:(
@KingStakh 抱歉回复晚了..我创建了过滤器，它将摆脱 $first 和 $last 检查 ng-repeat 指令。
感谢您的回复，这是解决问题的又一个示例！
@KingStakh 真的很高兴知道..谢谢:)

【解决方案2】：

我为您的用例创建了自定义过滤器。基本上，过滤器将通过过滤传递的参数（表单和颜色）的空值来返回数组。

过滤后，您可以使用$first 和$last 和ng-if 来仅显示第一个和最后一个元素。

请看下面的代码。

var myApp = angular.module('myApp', []);
  

  myApp.filter('customFilter', function() {
      return function(input, param) {
        if(input.length == 0) { return [];}
        var result = [];
        angular.forEach(input, function(item) {
          if(item[param] && item[param]!= '') {
            result.push(item);
          }
        });
        return result;
     }
  })

myApp.controller("myCtrl", function ($scope, $window) {
    $scope.items = [
        { name: "item1", color: "green", form: "" },
        { name: "item2", color: "", form: "circle" },
        { name: "item3", color: "red", form: "" },
        { name: "item4", color: "", form: "oval" },
        { name: "item5", color: "blue", form: "" },
        { name: "item6", color: "", form: "square" },
        { name: "item7", color: "yellow", form: "" },
        { name: "item8", color: "", form: "rectangle" }     
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
<div ng-repeat="item in items | customFilter:'color'" ng-if="$first || $last">
    {{item.name}}-{{item.color}}
</div>
<br />
<div ng-repeat="item in items | customFilter:'form'" ng-if="$first || $last">
    {{item.name}}-{{item.form}}
</div>
<br />
</body>

【讨论】：

【解决方案3】：

我做到了；）

var myApp = angular.module('myApp', []);

myApp.controller("myCtrl", function ($scope, $window) {
    $scope.items = [
        { name: "item1", color: "green", shape: "" },
        { name: "item2", color: "", shape: "circle" },
        { name: "item3", color: "red", shape: "" },
        { name: "item4", color: "", shape: "oval" },
        { name: "item5", color: "blue", shape: "" },
        { name: "item6", color: "", shape: "square" },
        { name: "item7", color: "yellow", form: "" },
        { name: "item8", color: "", shape: "rectangle" }     
    ];
  
	$scope.shape = function(item){
		return !(item.color == '')
	};
	
	$scope.color = function(item){
		return !(item.shape == '')
	};  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
<div ng-repeat="item in items | filter:shape" ng-if="$first || $last">
    {{item.name}}-{{item.color}}
</div>
<br />
<div ng-repeat="item in items | filter:color" ng-if="$first || $last">
    {{item.name}}-{{item.shape}}
</div>
<br />
</body>

【讨论】：