在html文件之间传递值

时间:2016-04-25 06:12:25

标签: angularjs ionic-framework

我正在使用离子/角度JS制作购物应用程序。我想将一个值(我的子类别的名称)从子类别页面传递到详细信息页面。这是我的代码:

Subcategory.html

<div>
<ion-view view-title="SubCategories">
<ion-list>
<ion-item class="ionitems" ng-repeat="sublist in subCategories" href="#/app/playlists/{{sublist.id}}/details">
{{sublist.name}}

 <!--<a ng-click="godetails();">{{sublist.name}}<a/>-->
 </ion-item>
</ion-list>
</div>  

详细信息页面

<ion-content>
    <h4>Product Details</h4>
    <ion-view view-title="playlists">
      <ion-content ng-controller="PlaylistCtrl">
        <input type="button" ng-click="addToCart();" value="add cart" />
      </ion-content>

添加到购物车控制器:

 .controller('detailsCtrl', function($scope){

      var arr = [];

      $scope.addToCart = function () {
      arr.push("");

我需要将子类别名称从子类别页面传递到详细信息页面和添加到购物车控制器。我怎么能这样做?

2 个答案:

答案 0 :(得分:1)

您可以将子类别值发送为URL Parameters,请参阅this link

由此您必须为详细信息页面

创建state

例如

 .state('app.detail', {
    url: "/product/:productId",
    templateUrl: 'detail.html',
    controller: 'detailsCtrl'
 })

在您的detailsCtrl控制器中,您将获得价值,即产品ID,从中您可以获得详细信息并将其显示到详细信息页面

控制器中的

 .controller('detailsCtrl', function($scope,$stateParam){
    var productId =  $stateParam.productId;
    //now you get product id , get the detail and show on detail page
  });

您传递网址参数的视图代码将是

<ion-view view-title="SubCategories">
<ion-list>
<ion-item class="ionitems" ng-repeat="sublist in subCategories">
 <a  ui-sref="detail({productId: sublist.productId})">{{sublist.name}}<a/>
 </ion-item>
</ion-list>

答案 1 :(得分:0)

您必须创建服务才能获取和设置数据,如此

   myApp.service('myService', function() {
       var data = "";
       return {
        getData: function() {
          return data;
        },
        setData: function(subcategoryName) {
          data = subcategoryName;
        }
      };
    });

在您的控制器中注入服务以获取字幕

   .controller('detailsCtrl', function($scope,myService){

  var arr = [];
// use myService to get the data

var subcategory_name = myService.getData();

  $scope.addToCart = function () {
  arr.push("");