如何为每个动态网格视图内容重定向到新屏幕？

Question

我有一个网格视图，我正在显示我的数据库中的数据。比如说，如果我有 6 个标题。那么我的网格视图将是 6 个（框）。每当我按下每个网格视图标题 [框]。我需要重定向到单独的 6 屏幕。该怎么做？

所以如果我在网格视图中按下我的第一个标题。那是Orders，我需要重定向到order.html，如果我按Delivery，我需要将它们重定向到Delivery.html。该怎么做？

这是用 id 或 name 0r 检查的任何方法吗？

更新：

   .controller('MydashCtrl', function($scope, $state, $window) {

  $scope.Data = [{
    "id"   :  "1",
    "name" : "Orders",
    "Image" : "http://img.21food.com/20110609/product/1306576307495.jpg"
  },{
    "id"   :  "2",
    "name" : "Delivery",
    "Image" : "https://www.wildflavors.com/NA-EN/assets/Image/bakery.png"
  },{
    "id"   :  "3",
    "name" : "Collections",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  },
  {
    "id"   :  "4",
    "name" : "Payments",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  },
  {
    "id"   :  "5",
    "name" : "Purchase",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  },
  {
    "id"   :  "6",
    "name" : "Re-Orders",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  }]

   $scope.changestate= function(name) { 

     if(name="Orders"){
      $state.go('reorder', { details : JSON.stringify(name) });
      }else if(name="Delivery"){
     $state.go('dashboarddetail', { details : JSON.stringify(name) });
      }


  }



})

我的 Html 代码：

    <div class="item item-body no-padding scroll" style="border-width: 0px !important;">

        <div class="row no-padding" ng-repeat="mydash in Data"  ng-if="$index % 2 === 0">

            <div class="col col-50 custom-design2" style="background: url({{Data[$index].Image}}) no-repeat center;background-size: cover; " ng-click="changestate(Data[$index].name)" ng-if="$index < Data.length">
                <div class="custom-design1"><span class="grid-title">{{Data[$index].name}}</span></div>
            </div>

            <div class="col col-50 custom-design2" style="background: url({{Data[$index + 1].Image}}) no-repeat center;background-size: cover; " ng-click="changestate(Data[$index + 1].name)" ng-if="$index + 1 < Data.length">
                <div class="custom-design1"><span class="grid-title">{{Data[$index + 1].name}}</span></div>
            </div>


        </div>



    </div>

</div>

好的，它的重定向。但现在在我的重定向屏幕中。内容名称 .Title 未显示？？

这是我的订单标题的重定向屏幕代码：

我的屏幕html代码：

<ion-view cache-view="false" title= {{singleDetail.name}} hide-nav-bar="false" class=" ">

此 html 的控制器代码：

.controller('reorderCtrl', function($scope, $state, $window, $ionicPopup, $stateParams, $ionicLoading, $timeout, $ionicHistory){
  $scope.singleDetail = JSON.parse($stateParams.details);


})

这可能是因为我的主网​​格视图控制器吗？

.controller('MydashCtrl', function($scope, $state, $window) {

  $scope.Data = [{
    "id"   :  "1",
    "name" : "Orders",
    "Image" : "http://img.21food.com/20110609/product/1306576307495.jpg"
  },{
    "id"   :  "2",
    "name" : "Delivery",
    "Image" : "https://www.wildflavors.com/NA-EN/assets/Image/bakery.png"
  },{
    "id"   :  "3",
    "name" : "Collections",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  },
  {
    "id"   :  "4",
    "name" : "Payments",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  },
  {
    "id"   :  "5",
    "name" : "Purchase",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  },
  {
    "id"   :  "6",
    "name" : "Re-Orders",
    "Image" : "http://royalnutrimakmur.com/img/productImg02.jpg"
  }]

   $scope.changestate= function(name) { 

     if(name=="Orders"){
      $state.go('dashboarddetail', { details : JSON.stringify(name) });
      }else if(name=="Re-Orders"){
     $state.go('reorder', { details : JSON.stringify(name) });
      }


  }



})

Answer 1

一个简单的方法就是在 ng-clcik 中调用一个函数，如下所示：

在视图中只需使用您要重定向的值调用此函数：

<div ng-click="changestate(Data[$index].name)">Tile</div> //eg. of one tile

在控制器中创建重定向功能：

    $scope.changestate= function(name) {
      if(name=="Orders"){
      $state.go("app.order"); 
      }else if(name=="Delivery"){
      ... // whatever your code here
      }

    };

谢谢