Использование ion-list для отображения подпунктов выбранного элемента

#angularjs #ionic-framework

Вопрос:

Я создаю приложение, в котором отображается список отображаемых элементов. при выборе элемента он будет перенаправлен на другую страницу, где другой набор элементов перечислены с флажком, так что элементы могут быть установлены флажки для дальнейшей обработки. Я могу выбрать элемент из списка первой страницы, но проблема в том, что на следующей странице не отображаются элементы, связанные с выбранным элементом, и они остаются пустыми.Пожалуйста, помогите мне решить эту проблему.

html страница1:

 <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 страница2:

 <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');
   };
}])

Ответ №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. можете ли вы прикрепить рабочий plnkr, чтобы он был для первого пользователя, такого как я.

2. На данный момент я не могу это реализовать, но для лучшего понимания отредактируйте мой ответ.

Ответ №2:

Если вы перейдете на следующую страницу, эта страница должна знать, что было выбрано на предыдущей странице. Поскольку вы используете $state.go try, с помощью $stateparams которого вы переходите на следующую страницу. Что-то вроде:

Текущая страница

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

Следующая страница -> app.CarDetails

 $scope.selected = $stateparams.value;

На следующей странице вы можете использовать значение для поиска и предварительного заполнения информации, необходимой при нажатии на предыдущую страницу.

Не забудьте ввести / добавить $stateparams в определение контроллера.