Question

我正在使用角度的应用程序，我在数组中有项目，当我点击每个项目时，详细信息应显示在详细信息页面中，我想通过显示所有项目的详细信息来实现此目的动态相同的详细信息页面，我该怎么做？这是我的代码

<body ng-app="myApp" ng-controller="mobileController">
search:<p><inpu type="text" ng-model="test"></p>  
<ul>  
 <li ng-repeat="x in names | filter :test" >
  <a href=#/> {{ x }}</a>
    </li>
    </ul>
     <div ng-view></div>

     var app = angular.module("myApp",[]);
    app.controller('mobileController', function($scope) {
    $scope.names = ['iphone', 'Moto', 'Oneplus'];
    });
    </body>

我想在同一详细信息页面显示iPhone，moto，oneplus的详细信息，当用户点击iPhone时，应显示iPhone详情，其他人也一样。

Answer 1

这是关于如何使用UI-Router

执行所需操作的plunkr

您可以通过两种状态使用两种状态来执行您想要的操作：一种用于列表视图，另一种用于详细信息视图。

$stateProvider
  .state('items', {
    url: '/',
    controller: 'ItemsListCtrl',
    templateUrl: 'items-list.html',
    resolve: {
      Items: function (ItemsService) {
        return ItemsService.getAll();
      }
    }
  })
  .state('items.details', {
    url: ':itemId/',
    controller: 'ItemDetailsCtrl',
    templateUrl: 'item-details.html',
    resolve: {
      Item: function (ItemsService, $stateParams) {
        return ItemsService.getById($stateParams.itemId);
      }
    }
  })

当有人点击某个项目时，您将它们发送到一个url，并将itemId作为stateParam，并在您当前呈现的视图中加载视图时解析该项目（这些在ui-router中称为嵌套/子视图）

然后在控制器中，您只需在州一级注入您解决的项目/项目，并可以操纵它们或将它们分配到您的范围。

  .controller('ItemsListCtrl', function ($scope, Items, $state) {
    $scope.Items = Items;

    $scope.viewItemDetails = function (item) {
      $state.go('items.details', {itemId: item.id});
    };
  })
  .controller('ItemDetailsCtrl', function ($scope, Item, $state) {
    console.log(Item);
    $scope.Item = Item;

    $scope.closeDetails = function () {
      $state.go('items');
    };
  })

我建议您查看UI-Router的文档https://github.com/angular-ui/ui-router/wiki

使用单个html页面在angularjs中进行动态路由？

1 个答案: