从数组中选择单个对象以显示在视图中 [Angular]

Question

我之前也问过类似的问题，但两种解决方案都没有用。

我目前有一个使用 AngularJS 构建的商店应用程序，我的问题是，我需要能够单击一个项目并打开“项目”视图并仅显示存储在项目数组中的具有匹配 ID 的信息一个服务。

例如。商店视图上显示的第一个项目的 id 为 1，商店上显示产品名称等。单击时，项目将打开项目视图以仅显示该产品及其信息。

这是我的商店控制器：

'use strict';
angular.module('angularStoreApp')
  .controller('storeCtrl', function($scope, StoreService){
    $scope.items = StoreService.items();
  });

服务（缩短以节省备用，还有 12 项其他项目）。

'use strict';

angular.module('angularStoreApp')
  .service("StoreService", function() {
    var items = [ {
      itemId: 1,
      qty: 0,
      stock: 5,
      price: 99.00,
      name: 'Almond Toe Court Shoes, Patent Black',
      category: 'Womens Footerwear'
    },
      {
        qty: 0,
        stock: 4,
        price: 42.00,
        name: 'Suede Shoes, Blue',
        category: 'Womens Footerwear'
      }];
    this.items = function() {
      return items;
    };
  });

商店视图

<!-- Start of item iteration -->
  <div ng-repeat="item in items">
    <!-- Start of item -->
      <div class="item">
        <div class="item_info">
          <img src="http://i.imgur.com/Bn1iB6X.jpg"/>
          <div class="item_footer">
            <div class="info_text">
              <h2>{{item.name| limitTo: 8}}...</h2>
              <span>{{item.price | currency}}</span>
            </div>
            <div class="icon">
              <a ng-href="#"><button role="button">More</button></a>
            </div>
          </div>
        </div>
      </div>
    <!-- End of item -->
  </div>
<!-- End of item iteration-->

项目控制

'use strict';

angular.module('angularStoreApp')
  .controller('itemCtrl', function ($scope, StoreService) {

    $scope.items = StoreService.items();
  });

项目视图

<div ng-include="'components/navbar/navbar.html'"></div>

<div ng-repreat="item in items">
<div class="item-page-container">
  <div class="item-p-img">
    {{item.name}}

  </div>
  <div class="item-p-tab-Container">
    <ul>
      <li><a href="#">{{item.name}}</a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  </div>
</div>
</div>

请询问更多代码或更方便查看，请参阅我的Github Repo

请说清楚函数，随意放入plunker，我的Javascript技能来自Angular，但是我以前没有搜索过这样的数组。我需要一个很好的解决方案，我可以转移/学习逻辑。

Answer 1

让你的路线像这样：

$routeProvider
        .when('/items', {
            templateUrl: 'yourtemplate-path/items.html',
            controller: 'yourItemController'
        })
        .when('/items/:itemId', {
            templateUrl: 'yourtemplate-path/items-detail.html',
            controller: 'yourItemDetailsController'
        })

你的控制器：

对于物品，

'use strict';
angular.module('angularStoreApp')
  .controller('storeCtrl', function($scope, StoreService){
    StoreService.items(function(){
        $scope.items = data;
    });
  });

对于商品详情页面，

'use strict';
angular.module('angularStoreApp')
  .controller('storeDetailsCtrl', function($scope, $routeParams, StoreService){
    StoreService.items({itemId: $routeParams.itemId}, function(){
        $scope.item = data;
    });
  });

并创建您的新服务，该服务根据此 id(itemId) 获取数据

注意：我没有测试代码。

Answer 2

商店视图 （不确定您的路由），但会像这样尝试 smt：

<a ng-href="/items/{{item.itemID}}"><button role="button">More</button></a>

这应该会将您带到您的项目视图。

在您的 Item ctrl 中，如果您注入 $routeParams，您可以像这样获取 id：

 item_id = $routeParams.id

然后像这样搜索您的项目：

items = StoreService.items();
$scope.item = items.indexOf(item_id)

所以在您的项目视图中删除 ng-repeat 并使用项目对象。

正如我之前所说，不能完全确定您的项目结构。但这应该会让你上路。