Javascript 从阵列中选择要在视图中显示的单个对象[角度]

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

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

比如说。商店视图上显示的项目1的id为1，商店上显示的是产品名称等。单击时，项目将使用项目视图打开，以仅显示该产品及其信息

这是我的商店管理员：

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

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

商店视图

<!-- 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-->

项目视图

<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>

{{item.name}

请询问更多代码或更易于查看，请参阅我的

请明确函数，可以随意放入plunker，我的Javascript技能来自Angular，但是搜索这样的数组我以前从未做过。我需要一个好的解决方案，在那里我可以转移/学习逻辑

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

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

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

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

因此，在项目视图中，删除ng repeat并使用项目对象

正如我之前所说的，我并不完全确定您的项目的结构，。但这会让你走上正轨

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

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

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

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

因此，在项目视图中，删除ng repeat并使用项目对象

---

正如我之前所说的，我并不完全确定您的项目的结构，。但这会让你走上正轨

让您的路线如下所示：

$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）获取数据

---

注意：我没有测试代码。

让您的路线如下：

$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）获取数据

---

注意：我没有测试代码。

有几个问题，比利，在你的项目视图中，为什么要迭代所有项目？在你的itemctrl中，你又一次遍历了所有的项吗？嘿，Jax，谢谢你的回复。我仍然是新手，但是，如果没有在Item视图中迭代repeat，那么如果我手动指定一个Item，数据将不会显示。如果我做错了，一定要告诉我一个更好的方法@BillyPurvis，你能提供你所拥有的吗？由于某种原因，我似乎无法让plunkr工作，这不是我以前经常使用的东西。@BillyPurvis:你能再提供一次服务吗？根据id获取数据。这样，在您的详细信息页面中，您就可以调用此新服务。比利，在您的项目视图中，您为什么要迭代所有项目？在你的itemctrl中，你又一次遍历了所有的项吗？嘿，Jax，谢谢你的回复。我仍然是新手，但是，如果没有在Item视图中迭代repeat，那么如果我手动指定一个Item，数据将不会显示。如果我做错了，一定要告诉我一个更好的方法@BillyPurvis，你能提供你所拥有的吗？由于某种原因，我似乎无法让plunkr工作，这不是我以前经常使用的东西。@BillyPurvis:你能再提供一次服务吗？根据id获取数据。这样，在您的详细信息页面中，您可以调用此新服务嘿-谢谢，它不起作用，只是在我哭过之后默认为主页。我注意到提到了itemID，但是item_id，他们都需要我itemID吗？你希望我更新我的物品控制器吗？是的，也在你的路线中弹出-谢谢，它不起作用，只是在我哭泣后默认为主页。我注意到提到了itemID，但是item_id，他们都需要我itemID吗？你希望我更新我的物品控制器吗？是的，也可以打开你的路线