Search code examples
angularjsangularjs-ng-repeatng-showangular-ng-if

AngularJs show first and last from filtered list

Have some problem show only first and last repeated element after filtering empty string from array.

My code:

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>

But I need show only first and last elenemt in list. Ex. in first list: item1-green and item7-yellow (item3-red and item5-blue must be hidden), second list item2-circle and item8-rectangle.

Solution

  • I created custom filter for your use case. Basically the filter will return array by filtering the empty value for the passed parameter(form and color).

    After filtering, you can use $first and $last with ng-if to display only first and last elements.

    see the code below.

    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>