I would like to show a different limitTo number on Angular.js ng-repeat, based on a variable.
Here is my code:
<input type="text" ng-model="search" ng-change="checkNewCard(search)"/>
<div ng-repeat="score in scores | filter:search | limitTo:6" ng-hide="search">
...
</div>
<div ng-repeat="score in scores | filter:search | limitTo:5" ng-hide="!search">
...
</div>
<div new-card name="search" ng-show="showNewCard"></div>
and in the controller:
$scope.showNewCard = false;
$scope.checkNewCard = function (search) {
if (search == "")
$scope.showNewCard = false;
else {
$scope.showNewCard = true;
}
};
I can only assume there is a more elegant way of changing the limitTo based on the search input, I just have no idea what to look for.
You can see the implementation of this code on http://happinesshunt.co.
P.S.
I'm new here and new to development in general, so please forgive me if the question wasn't asked properly.
Thanks ahead!
You can add condition using ng-if also and this is effective too. You can apply any condition to your list using ng-if attribute. In below example, I have put condition where Age > 20 and IsActive is true. ng-repeat will fetch all records which full fill this scenario.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.
Stay on the bleeding edge of your favorite technologies. $index is a way to show which iteration of a loop you're in. If we set up an ng-repeat to repeat over the letters in 'somewords', like so: <div ng-app="app"> <div ng-repeat="item in 'somewords'.split('')"> {{$index + 1}}.
Here could be a first solution (since it can be improved, e.g. by hiding/displaying the more/less links):
<div ng-repeat="score in scores | limitTo: limit">
...
</div>
<a href ng-click="incrementLimit()">more</a>
<a href ng-click="decrementLimit()">less</a>
In your controller:
var limitStep = 5;
$scope.limit = limitStep;
$scope.incrementLimit = function() {
$scope.limit += limitStep;
};
$scope.decrementLimit = function() {
$scope.limit -= limitStep;
};
placing a function inside of an ng-click is good procedure, but we can directly increment inside that also here one example..
<input type="text" ng-model="lmt"/><!--model with text box-->
<button ng-click="lmt=lmt+1">INCREMENT</button><!--model with INCREMENT btn-->
<button ng-click="lmt=lmt-1">DECREMENT</button><!-- with DECREMENT btn-->
<select ng-model="lmt"><!--select options also-->
<option>20</option>
<option>50</option>
<option>100</option>
</select>
<table>
<tr ng-repeat="employee in employData|limitTo: lmt"><!--lmt is the variable-->
<td>{{employee.regNo}}</td>
<td>{{employee.name}}</td>
<!-----other------>
</tr>
</table>
and in controller,
$scope.lmt=20; /or something
$scope.employeeData={something............};
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