javascript - Angular JS : retrieve json data based on id

Question

我有一个项目列表。当您单击某个项目时，它会识别其 ID 并将您带到其对应的页面 localhost:8000/products/1。

但是我如何才能获得该产品/项目 ID 的其余信息？

我的 json 数据看起来像这样......

[
  {
    "id": "1",
    "title": "Chips",
    "subTitle": "Snack",
    "imgUrl": "chips.png",
    "demoImgUrl": "snacks.png",
    "brandLogoUrl": "somebrand.png"
  },
...

我的 productList.js 它成功显示了产品列表

(function() {

  'use strict';

  angular
    .module('testProducts')
    .component('productList', {
      templateUrl: '/components/productList/productList.html',
      controller: ProductListController
    });

  ProductListController.$inject = ['ProductsService'];

  function ProductsListController(ProductsService) {
    var vm = this;

    vm.products = [];

    // Get the Products data
    ProductService.getData().then(function(response) {
      console.log(response.data);
      vm.products = response.data;
    }).catch(function(err) {
      console.error('Error', err);
    });
  }

})();

和我的 item.js 它应该获取那个 id 的 json

(function() {

  'use strict';

  angular
    .module('testProducts')
    .controller('itemController', ItemController);

  ItemController.$inject = ['$state', '$stateParams', 'ProductsService'];

  function ItemController($state, $stateParams, ProductsService) {
    var vm = this;

    vm.itemId = $stateParams.itemId;
    console.log($stateParams.itemId);

    // Get the Product data
    ProductsService.getData().then(function(response) {
       console.log(response.data);
    }).catch(function(err) {
       console.error('Error', err);
    });
  }

})();

还有我的 html item.html(不呈现标题或 imgUrl)

<div>
  <p>itemId: {{$ctrl.itemId}}</p>
  <p>{{$strl.title}}</p>
  <img src="{{$ctrl.imgUrl}}" />
</div>

我得到了

angular.js:13236 ReferenceError: ProductService is not defined

那么如何只根据json数据项id显示信息呢？

Answer 1

您可以使用 $filter 来检索基于任何属性的所需对象。它的语法是 $filter('filter')(vm.products, { Id: 1 })。 vm.products 只是对象列表的数据，它将返回 ID 为 1 的所有对象的列表。