angularjsの別のページで詳細ビューを表示および編集する方法

Question

私はすべてのデータを取得することができるテーブルグリッドビューを持っています。現在表示ボタンをクリックすると詳細ビューが同じページに表示されます

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); 
        }; 

：これは私のコントローラである

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

：..But私は私のデータを取得し、同じページにdetailviewを表示することができますこのページから....別のページに をそのdetailviewを表示したいです

Answer 1

UIルーターを見てください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 -->