如何在离子中显示数据表单url参数

时间:2017-02-03 08:21:30

标签: angularjs ionic-framework routing

在离子中创建app我必须将参数从一个页面传递到另一个页面并显示该参数的数据格式,数据来自json。我的问题是如何从该参数获取数据。我使用ui-router或任何事情请检查我的代码告诉我该怎么做,因为当我使用ui-router时会出错。

控制器

.controller('menuCtrl', function($scope,$http) {


     $http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function (response) {
      $scope.myData = response.data;
      $scope.offerName = ''; //set initially
      $scope.selectedIndex = -1;
      $scope.filteredOffers = [];



  });
 $scope.showData = function(offer_name, index) {
        $scope.offerName = offer_name;
      $scope.filteredOffers = $scope.myData.filter(function(offer) {
        return offer.offer_name == $scope.offerName;
      });
        $scope.selectedIndex = index;

      }


})

发送数据参数的Datapage

 <div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'" >
            <div class="thumbnail " >

                   <img class="thumbnail  img-responsive " ng-src="{{ da.store_image}}" 
ng-click="showData(da.offer_name, $index)"
                    />   
                <div class="caption">
                   <a class="item item-text-wrap" ng-href="#/Deals/{{da.offer_name }}" ng-click="showData(da.offer_name, $index)"
 >
                    <b class="group inner list-group-item-heading center-block">
                        {{da.offer_name | limitTo: 12 }} Deals </b>

              </a>

                  </div>
                </div>
            </div>

            </div>

我想根据参数显示数据的页面..

 <div ng-repeat="offer in filteredOffers">
      <div class="couponCode">{{offer.coupon_code}}</div>
      <div class="couponTitle">{{offer.coupon_title}}</div>
      <div class="couponDescription">{{offer.coupon_Description}}</div>
    </div>

请建议我.. 提前致谢

这里是尝试捕获数据的dealctrl

.controller("dealsCtrl", function ($scope, $http, $stateParams)
 { 
    $http({ 
        url: "tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8",
         method: "get", 

    params: { offer_name: $stateParams.offer_name } })

    .then(function (response) 
    { $scope.da = response.data;
            console.log($scope.da);

     })
})

1 个答案:

答案 0 :(得分:0)

应使用Url参数来标识资源,而不是传递对象。为了实现这一目标,有一种更好的方法:使用ServiceFactory来存储您想要的数据并在控制器之间访问它们。这是一个简单的例子:

app.controller('firstController', function(MyService) {

    var data = getSomeData();

    MyService.dataToStore = data;
)}


app.factory('MyService', function() {

    return {

         dataToStore: {}
    }
})

app.controller('secondController', function(MyService) {

    var data = MyService.dataToStore;
})

如果你正在使用Ionic,你可以听取像#34; beforeEnter&#34;之类的活动。为了在您输入视图时获取数据。