Question

我尝试编写一个从REST API获取列表的小应用程序，并显示每个所选项目的详细信息。我正在寻找一个关于如何将所选id从列表视图传输到详细视图的简单教程，但是无法弄清楚。我假设我需要使用Master-detail技术。

以下是代码：

列表视图：

<ul>
    <li ng-repeat="gadgetDetails in gadgettDetails">

        <div>
                <a href="#/gadgets/{{gadgetDetails.id}}"><p>{{gadgetDetails.type}}</p></a>
                <p>{{gadgetDetails.manufacturer}}</p>
        </div>  
        <hr />
    </li>
</ul>

详情视图

<div>
     <p><a href="#/gadgetLists">Go back to Gadgets list</a></p>

      <p>{{gadgetDetails[2].type}}</p>
      <p>{{gadgetDetails[2].color}}</p>
      <p>{{gadgetDetails[2].manufcturer}}</p>
</div>

所以我只提出了问题2（我从REST API获得的JSON列表中的第二个对象，但它实际上应该是gadgetDetails[i].type 但我无法弄清楚如何获得列表中每个项目的索引（例如i）

这是控制器：

GadgetListCtrl.controller('gdgtList', function($scope, $http, $filter) {
$http.get('https:.../gadgets.json').
    then(function(response) {
        $scope.gadgettDetails = response.data;
    });

});

所以问题是如何通过id为每个项目显示其详细信息感谢

Answer 1

你可以通过angular ui router参数

来实现这个目标

下面是虚拟代码

.config 块

中的

$stateProvider
    .state('gadgets', {
        url: "/gadgets/:id",
        templateUrl: 'gadgetDetail.html',
        controller: 'gadgetController',
        controllerAs: 'vm',
        params: {
         id: null
        }
    });

并在控制器文件中，您可以访问以下ID

  .controller('GadgetController', function($state, $stateParams) {

    var selectedID = $state.params.id;
    //alternatively you can get using $stateParams service
    // $stateParams.id 

  if(selectedID) {
   // get detail of gadget
  }
});

AngularJS中的主要细节

1 个答案: