AngularJS, a popular JavaScript framework for building web applications, provides a number of powerful features that allow you to create dynamic and interactive user interfaces. Among these features is ngRepeat, a directive that instantiates a template once per item from a collection. In this tutorial, we will guide you through the process of implementing search, sort, and pagination functionalities with ngRepeat in AngularJS.
Setting Up Your Environment
Before we begin, ensure that you have AngularJS included in your project. You can download it from the official AngularJS website or include it via a CDN:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Implementing Search
AngularJS provides a simple way to implement a search functionality using the filter filter. Here’s an example:
<input type="text" ng-model="searchText">
<ul>
<li ng-repeat="item in items | filter:searchText">{{ item }}</li>
</ul>
In this example, the filter filter is used to filter the items in the ngRepeat directive based on the searchText model. As you type in the input field, the list will automatically update to include only the items that contain the typed text.
Implementing Sort
You can implement a sort functionality using the orderBy filter. Here’s an example:
<button ng-click="orderProp = 'name'">Sort by Name</button>
<ul>
<li ng-repeat="item in items | orderBy:orderProp">{{ item.name }}</li>
</ul>
In this example, the orderBy filter is used to sort the items in the ngRepeat directive based on the orderProp model. When you click the button, the orderProp model is set to ‘name’, and the list is sorted by the name property of the items.
Implementing Pagination
Implementing pagination requires a bit more work, as AngularJS does not provide a built-in way to do it. However, you can create a custom filter for this purpose. Here’s an example:
angular.module('myApp', [])
.filter('paginate', function() {
return function(input, start) {
start = +start;
return input.slice(start);
};
});
In this example, we’re creating a paginate filter that returns a slice of the input array starting from the start index.
You can use this filter in combination with ngRepeat and some controls for navigating the pages:
<button ng-disabled="currentPage == 0" ng-click="currentPage = currentPage - 1">Previous</button>
<button ng-disabled="currentPage >= items.length/pageSize - 1" ng-click="currentPage = currentPage + 1">Next</button>
<ul>
<li ng-repeat="item in items | paginate:currentPage*pageSize | limitTo:pageSize">{{ item }}</li>
</ul>
In this example, the paginate filter is used to get a slice of the items starting from currentPage*pageSize, and the limitTo filter is used to limit the number of items to pageSize. The Previous and Next buttons are used to decrease and increase the currentPage model, respectively.
Conclusion
The ngRepeat directive in AngularJS provides a powerful tool for creating dynamic lists of items. By understanding how to use ngRepeat in combination with filters, you can implement search, sort, and pagination functionalities to enhance your web application’s user interface. Happy coding!
