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

那么我如何才能根据json数据项ID显示信息？

Answer 1

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

Angular JS：根据id

1 个答案: