AngularJs show first and last from filtered list -
have problem show first , last repeated element after filtering empty string 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 need show first , last elenemt in list. ex. in first list: item1-green , item7-yellow (item3-red , item5-blue must hidden), second list item2-circle , item8-rectangle.
i created custom filter use case. filter return array filtering empty value passed parameter(form , color).
after filtering, can use $first , $last ng-if display first , last elements.
see 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>
Comments
Post a Comment