Question

我有一个表格网格视图，我可以在其中获取所有数据..目前当我点击显示按钮时，详细视图显示在同一页面中..但我想在另一页面显示该详细视图.. .. 在此页面中，我可以在同一页面中获取我的数据并显示详细信息视图：

        <button><a href="#/products">Add Products </a></button>
    <label>Search</label>
        <input class="search" type="text" placeholder="Search" ng-model="searchBox"> <i class="glyphicon glyphicon-search"></i>
    <table class="table table-bordered" ng-init="getProducts()">
            <thead>
                <tr>
                    <th>ID
                    </th>
                    <th>Category

                    </th>
                    <th>Product

                    </th>
                </tr>
            </thead>

            <tbody>
                <tr ng-repeat="productInfo in products" ng-show="(products | filter:criteria).length" ng-style = "{'background-color': $index == selectedIndex ? 'lightgray': ''}">
                <td>{{ $index + 1 }}</td>
                    <td>{{productInfo.categoryname}}</td>
                    <td>{{productInfo.productname}}</td>
                    <td> 
            <button href="#/showproducts" ng-click="selectProduct(productInfo, $index)" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Show </button>
             <a href="#/editproducts" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent1">Edit</a>
             <a ng-click="delete(productInfo);" class="btn btn-primary " ><i class="glyphicon glyphicon-trash"></i>Delete</a>
          </td>
                </tr>
            </tbody>
    </table>
    <div class="col-md-4">
        <ul>
        {{selectedProduct.categoryname}} //I want to these getdetails into another html file
        {{selectedProduct.productname}}
        {{selectedProduct.product}}
         {{selectedProduct.noofservices}}
        </ul>
    </div>

这是我的控制者：

  var userid1 = sessionService.get('userid');
        $scope.getProducts = function(){
          $http.get('**/getproducts.php/?   userid='+userid1).then(function(response){
          $scope.products = response.data;
                  $scope.selectedIndex = null;
                  $scope.selectedProduct = null;
                  $scope.selectProduct = function(productInfo, index){
                    $scope.selectedIndex = index;
                    $scope.selectedProduct = productInfo;
                    console.log(productInfo);
                  };

Answer 1

看一下UI-router https://github.com/angular-ui/ui-router 它允许您定义应用程序的不同状态以及相应的URL。

基本上，

.config(($stateProvider, $urlRouterProvider) => {
$stateProvider
  .state('table', {
      url: '/table',
      templateUrl: 'table.view.html'
  })
  .state('tableDetail',{
      url: '/tabledetail',
      template: 'table.detail.html'
  })
})

然后在你的意见中： main.html

<div ui-view></div>

table.view.html

 ...
   <button><a ui-sref="tableDetail">Table Detail</a></button>
 ...

table.detail.html

...
<!-- Table Detail Stuff -->

如何在angularjs的单独页面中显示和编辑我的详细信息视图

1 个答案: