Menu
I have an array of objects ObjectsArr= [Object1 , Object2,Object3, Object4]
I want to show in my view the last object, how to do that in angularjs?
416
1) Using the array length property The length property returns the number of elements in an array. Subtracting 1 from the length of an array gives the index of the last element of an array using which the last element can be accessed.
To get the last N elements of an array, call the slice method on the array, passing in -n as a parameter, e.g. arr. slice(-3) returns a new array containing the last 3 elements of the original array. Copied!
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex .
ObjectsArr[ObjectsArr.length - 1] -- this will give you the last element in the array.
To display it in view: {{ObjectsArr[ObjectsArr.length - 1]}}
This will work even when the array has zero entries.
96
You can use ng-if directive and check if element is last by:
ng-if="$last"
please see demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function ($scope) {
$scope.data = [1,2,3]
});<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body >
<div ng-app="app">
<div ng-controller="homeCtrl">
<ul>
<li ng-repeat="item in data" ng-if="$last">{{item}}</li>
</ul>
</div>
</div>
</body>
</html>For working with Arrays I recommend Lodash or Underscore. It will save you a lot of time in the future.
Both have last method:
_.last([1, 2, 3]); //Will return 3
See the links for API and installation.
As for viewing the result in the view, you can assign a scope variable in the relevant controller for the result and show it.
Controller:
$scope.lastItem = _.last(array);
View:
{{lastItem}}
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
