如何在离子v-1中共享两页之间的值

时间:2017-10-18 04:57:34

标签: angularjs ionic-framework hybrid

我正在尝试在选择时添加两个页面的值。 它正在添加单个页面。但是当我移动到下一页时,总值为零。我正在尝试将传递总增值从一个页面添加到另一个页面。 在我搜索时,我发现需要创建一个服务控制器来调用全局范围值。



<!-- page one view page -->

<ion-content class="search-main padding">
   	<div class="list card">
	<div class="item item-body no-padding stable">
		<div class="row no-padding border-bottom" ng-controller="Ctrl3">
		<div class="col padding border-right" ng-click="openDateCheckIn()">
			<div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
		</div>
        <div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; <b>{{rootSum()}}</b></h2></div>
		</div>ass="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; {{rootSum()}}</h2></div>
		</div>
 <div ng-controller="Ctrl1">   
<div ng-repeat="gender in genders">
    <div class="row row-no-padding no-margin padding-important" style="color: #000;">
            <div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span>&nbsp;{{gender.id}}</span></div>
            <div class="col col-20"><span>Rs {{gender.value}}</span></div>
        <div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="{{gender}}" type="checkbox" value="{{gender.value}}" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
        </div></div>
     </div></div>

</ion-content>
&#13;
&#13;
&#13;

&#13;
&#13;
<!-- Page two view page -->

<ion-content class="search-main padding">
   	<div class="list card">
	<div class="item item-body no-padding stable">
		<div class="row no-padding border-bottom" ng-controller="Ctrl3">
		<div class="col padding border-right" ng-click="openDateCheckIn()">
			<div class="margin-bottom-10" style="color:#0c60ee;"><i class="icon icon-money"></i> Total Value =></div>
		</div>
        <div class="col padding"><h2 style="text-align:center; margin-top: 3px;">Rs. &nbsp; <b>{{rootSum()}}</b></h2></div>
		</div>
 <div ng-controller="Ctrl2">   
<div ng-repeat="gender in genders">
    <div class="row row-no-padding no-margin padding-important" style="color: #000;">
            <div class="col col-70"><i class="ion ion-ios-circle-filled"></i> <span>&nbsp;{{gender.id}}</span></div>
            <div class="col col-20"><span>Rs {{gender.value}}</span></div>
        <div class="col col-10"><div><label class="search-checkbox item item-checkbox" style="margin: -5px 0px 0px -2px;"><div class="checkbox checkbox-input-hidden disable-pointer-events checkbox-circle"><input id="{{gender}}" type="checkbox" value="{{gender.value}}" ng-checked="selection.indexOf(gender) > -1" ng-click="toggleSelection(gender)" /><i class="checkbox-icon"></i></div><div class="item-content disable-pointer-events" ng-transclude=""></div></label></div>
        </div></div>
     </div></div>
        
</div>
</div> 

</ion-content>
&#13;
&#13;
&#13;

控制器页面 -

&#13;
&#13;
//Ladies Makeup Party
.controller('Ctrl1', function($scope ,$rootScope) {
    $scope.genders=[{
    'id':'Krylon Party Makeup', 'value':2000 },
    {'id':'Makeup Studio', 'value':2200 },
    {'id':'Party Makeup(MAC)', 'value':2500 },
    {'id':'Party Mackeup(Airbrush)', 'value':3500 }     
    ];
      $rootScope.selection=[];
      $scope.toggleSelection = function toggleSelection(gender) {
        var idx = $scope.selection.indexOf(gender);
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
         }
         else {
           $scope.selection.push(gender);        
         }
      };
    })

//Ladies Makeup Pre-bridal
.controller('Ctrl2', function($scope ,$rootScope) {
    $scope.genders=[{
    'id':'Silver', 'value':10000 },
    {'id':'Gold', 'value':12000 },
    {'id':'Platinum', 'value':16000 }                
    ];
      $rootScope.selection=[];
      $scope.toggleSelection = function toggleSelection(gender) {
        var idx = $scope.selection.indexOf(gender);
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
         }
         else {
           $scope.selection.push(gender);        
         }
      };
    })

// Add total value on select
 .controller('Ctrl3', function($scope ,$rootScope) {
    
   $rootScope.rootSum=function(){
        var total=0;
        for(var i = 0; i < $rootScope.selection.length; i++){
        var product = $rootScope.selection[i];
        total += (product.value);
    }
    return total
      }; 

    }) *
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我可以在这里看到两个问题。

  • 您正在每个控制器初始化$ rootScope.selection = [],这将删除所有先前的更改。在运行块内的页面加载开始时初始化它。使用此链接实现运行run

myApp.run(function() { console.log("app run"); });

  • 您没有将所选数据传输到$ rootScope.selection变量。您需要在rootScope中附加所选产品,并确保不重复任何项目。我推荐你使用带有'ids'作为attrinute名称的对象而不是数组,这将确保没有任何项目本身重复。