Menu
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.
830
asked Feb 16 '26 12:02
If you only wanted to show first and last element of items inside ng-repeat you could use $first & $last variable of ng-repeat template which indicated $first & $last occurrence if they are true.
<div ng-repeat="item in items" ng-if="$first || $last">
{{item.name}}-{{item.form}}
</div>
Update
For such situation you should prefer to do custom filter, which will accept array, propertyName & valueToCheck. At the end it will return 1st and last element
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>
Filter
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
133
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
