ng-repeat :filter by single field

🌈 A Guide to Filtering with ng-repeat in AngularJS 🌈

Are you using ng-repeat in AngularJS to display an array of products and trying to filter them by colour? You're not alone! It's a common issue to encounter when working with ng-repeat filters. But fear not, we're here to help you solve this problem! 🤝

The Problem 😕

So, you have a lovely array of products that you're displaying using ng-repeat 🛍️. You've implemented the filter as follows:

<div ng-repeat="product in products | filter:by_colour">

However, you've noticed that the filter is not working exactly as you expected. If a product's name or description contains the specified colour, the product is still displayed, even after the filter is applied. It seems like the filter is being applied to every field of the product, instead of only the colour field. 😫

The Solution 💡

Fortunately, AngularJS provides a simple solution to this problem. You can specify the field to be used for filtering by modifying the filter expression. 🎉

Let's assume that the colour information of each product is stored in the colour field. To filter only by the colour field, you can update your filter expression as shown below:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

By specifying the field inside curly braces ({}) and assigning the filter value to the desired field, you are telling AngularJS to perform the filtering solely on that field. This way, only products with a matching colour will be displayed. 😎

Example Usage 🖥️

To illustrate this solution, let's consider a more specific example:

$scope.products = [
  { name: "T-shirt", description: "A comfortable cotton shirt", colour: "blue" },
  { name: "Jeans", description: "Stylish denim trousers", colour: "black" },
  { name: "Sweater", description: "Warm and cozy knitwear", colour: "red" }
];
$scope.by_colour = "blue";

With the updated filter expression, only the T-shirt, which has a colour of "blue", will be displayed. The other products, despite having the colour mentioned elsewhere, will not match the filter criteria. 🙅‍♂️

Call to Action ✨

Now that you know how to filter ng-repeat by a single field, go ahead and give it a try in your own AngularJS project! Apply this solution to make your filtering more precise and tailored to your needs. 🚀

Don't forget to share this guide with your fellow AngularJS enthusiasts so they can benefit from it too! Let's spread the knowledge and simplify filtering with ng-repeat. Together, we can make AngularJS development even more enjoyable! 🎉

Conclusion 🌟

Filtering ng-repeat by a single field in AngularJS is easy once you know the trick. By specifying the desired field in the filter expression, you ensure that the filter works as intended, without considering other fields.

So, what are you waiting for? Start filtering your products with precision and showcase only the ones that match the selected colour! Happy coding! 😊