使用ion-list显示所选项目的子项目

时间:2016-10-12 09:02:48

标签: angularjs ionic-framework

我正在创建一个应用程序,其中显示了一个项目列表。当选择一个项目时,它将被重定向到另一个页面,其中列出了另一组项目,并带有复选框,以便可以对这些项目进行复选以进行进一步处理。我可以从第一页列表中选择项目,但问题是在下一页中它没有显示与所选项目相关的项目,它仍然是空白的。请帮我解决。

html page1:

<ion-list>
     <ion-item ng-model="carBrand" ng-repeat="name in carSelect"  ng-click="selectItem(carBrand)">
     <!--ion-item ng-click="selectItem(value)" ng-repeat="value in carSelect" ng-model="value.selected"-->
         {{name.name}}
     </ion-item>
</ion-list>

html page2:

<ion-checkbox ng-repeat="brandType in newCarList">
     <div align="center"><span>{{brandType.types}}</span></div>
</ion-checkbox><br><br>

控制器:

carService.factory('carRepository',function(){
   var brandList={};
   brandList.data= [
       {'name':'Benz', 'types':['Truck', 'Regular']},
       {'name':'BMW', 'types':['Oversize', 'Motorcycle']},
       {'name':'Bently','types':['Regular']},
       {'name':'Honda','types':['SUV','Truck']},
       {'name':'Lexus','types':['Oversize','Motorcycle','Truck']},
       {'name':'Toyota','types':['SUV']}
   ];

  {
    return brandList;
  }
});

carService.controller('carBrand',['$scope','carRepository','$rootScope','$state',function($scope,carRepository,$rootScope,$state){

   $rootScope.carSelect= carRepository.data;
   $scope.newCarList=[];
   $scope.selectedItem = 'select';
   $scope.selectItem = function (key) {
      $scope.newCarList.push(key);
      $state.go('app.CarDetails');
   }
   $scope.addEntry = function () {
      $state.go('app.carEdit');
   };
}])

2 个答案:

答案 0 :(得分:1)

这是正确的:

在您的应用程序配置中,我应该设置v接收参数的状态,如下所示:

carService.config(function($stateProvider, $urlRouterProvider) {
    .state('html2', {
        templateUrl: 'overview',
        params:      ['value'],
        controller:  'HtmlCtrl2'
    })
    ......
})

在这里,您要说您将收到一个名为value的参数。

来自Html1Ctrl 在第一个控制器中,即根据您的示例在html 1中,您可以定义:

.controller('HomeCtrl1', function($state){
    $scope.redirect = function(){
        params = { 'value': 1 };
        $state.go('view', params);
    }
})

这里你说当该函数被称为“重定向”arme值并作为参数发送到重新路由时

在HtmlCtrl2中,在控制器2中,你得到......

.controller('HtmlCtrl2', function($scope, $stateParams) {
    var value= $stateParams[0];
});

答案 1 :(得分:0)

如果您导航到下一页,该页面应该知道在上一页中选择了什么。因为您正在使用$state.go尝试使用传递到下一页的$stateparams。类似的东西:

当前页面

$state.go('app.CarDetails',{value: value})

下一页 - &gt; app.CarDetails

$scope.selected = $stateparams.value;

在下一页上,您可以使用该值来查找和预填充上一页点击所需的信息。

请记住在控制器定义中注入/添加$stateparams