基于ID筛选JSON数据——Angular.js实现方案

Hey there! Let's walk through how to filter your product data by item_id in AngularJS—there are a couple of clean ways to do this depending on your needs:

1. Use AngularJS's Built-in Filter Directly in the Template #

This is the quickest approach if you just need to filter items as you display them. You can use the built-in filter filter right in your ng-repeat directive:

<div ng-app="yourApp" ng-controller="ProductController">
  <!-- Bind to an input to dynamically set the ID to filter -->
  <input type="text" ng-model="targetId" placeholder="Enter product ID">

  <!-- Filter products by item_id with exact match -->
  <div ng-repeat="product in products | filter: { item_id: targetId }:true">
    <h3>{{ product.name }}</h3>
    <p>ID: {{ product.item_id }} | Price: ${{ product.item_price }}</p>
  </div>
</div>

In your controller, define your product array and default target ID:

angular.module('yourApp', [])
.controller('ProductController', function($scope) {
  $scope.products = [
    { 
      name: 'Triblend Android T-Shirt', 
      item_id: '12345', 
      item_price: '15.00', 
      brand: 'Google', 
      category: 'Apparel', 
      variant: 'Black', 
      quantity: 1 
    },
    { 
      name: 'Triblend Android T-Shirt', 
      item_id: '12345', 
      item_price: '15.00', 
      brand: 'Google', 
      category: 'Apparel', 
      variant: 'White', 
      quantity: 2 
    },
    { 
      name: 'Google Pixel Case', 
      item_id: '67890', 
      item_price: '29.99', 
      brand: 'Google', 
      category: 'Accessories', 
      variant: 'Clear', 
      quantity: 1 
    }
  ];

  // Default target ID (updates automatically if you type in the input)
  $scope.targetId = '12345';
});

The :true suffix ensures an exact match—skip it if you want fuzzy matching (e.g., typing '12' would return items with ID '12345').

2. Filter in the Controller (For Reusability or Complex Logic) #

If you need to reuse the filtered data elsewhere in your controller, or add extra validation/logic before filtering, use JavaScript's native Array.filter() method:

angular.module('yourApp', [])
.controller('ProductController', function($scope) {
  $scope.products = [/* Your full product array */];

  // Reusable function to filter products by ID
  $scope.getProductsById = function(id) {
    // Add extra checks here if needed (e.g., validate ID format)
    if (!id) return [];
    
    return $scope.products.filter(function(product) {
      return product.item_id === id; // Exact match
    });
  };

  // Store filtered products for later use
  $scope.filteredProducts = $scope.getProductsById('12345');
});

Now you can use filteredProducts in your template just like the original array:

<div ng-repeat="product in filteredProducts">
  {{ product.name }} (ID: {{ product.item_id }})
</div>

3. Create a Custom Filter (For App-Wide Reuse) #

If you need to filter by ID across multiple controllers or templates, build a custom filter to keep your code DRY:

angular.module('yourApp')
.filter('filterByItemId', function() {
  return function(productsArray, targetId) {
    // Return all products if no ID is provided
    if (!targetId) return productsArray;
    
    return productsArray.filter(function(product) {
      return product.item_id === targetId;
    });
  };
});

Use it in any template across your app like this:

<div ng-repeat="product in products | filterByItemId: targetId">
  {{ product.name }}
</div>

Quick Tips: #

• Data Type Consistency: Ensure your targetId matches the data type of item_id (e.g., if item_id is a string, don't pass a number—'12345' vs 12345 will fail an exact match).
• Performance: For large datasets, filtering in the controller or using a custom filter is more efficient than template-side filtering, as it avoids re-running the filter on every digest cycle.

内容的提问来源于stack exchange，提问作者Ricky