Question

我正在开发一个应用程序，我可以将一个类别列表作为我的家，当有人点击类别选项时，会显示一个列表子类别。问题是我希望类别拥有自己的.json文件和列表子类别。那个控制器怎么样，我对angularjs很新，但非常喜欢它。示例类别A具有子类别1a，2a，3a，4a。

无论如何，将非常感谢帮助。

angular.module('starter', ['ionic', 'ionic-material',])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

//states
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/main.html',
    controller: 'listController'
  })

  .state('app.categories', {
    url: '/categories',
        templateUrl: 'templates/categories.html',
        controller: 'listController'
  })

  .state('app.itemList', {
    url: '/itemList',
        templateUrl: 'templates/itemList.html',
        controller: 'restController'
  })
  $urlRouterProvider.otherwise('/app/categories');
})

所以这下面是我的类别控制器，我希望如果有办法从另一个.json文件中获得子类别的另一个控制器

//controller for the categories
.controller("listController", ['$scope','$http', function($scope, $http){
 $http.get('js/data.json').success(function(data) {
    $scope.cusines = data;
  });
}]);

Answer 1

每个类别都可以有一个子类别json。

这是working plunker。

<强> app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.categories', {
    url: '/categories',
    views: {
      'menuContent': {
        templateUrl: 'templates/categories.html',
        controller: 'listController'
      }
    }
  })

  .state('app.subcategories', {
    url: '/categories/:id',
    views: {
      'menuContent': {
        templateUrl: 'templates/subcategories.html',
        controller: 'subListController'
      }
    }
  })

  .state('app.itemList', {
    url: '/itemList',
    templateUrl: 'templates/itemList.html',
    controller: 'restController'
  })
  $urlRouterProvider.otherwise('/app/categories');
});

<强> controllers.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller("listController", ['$scope','$http', function($scope, $http){
    $http.get('js/data/data.json').success(function(data) {
        $scope.categories = data;
    });
}])

.controller('subListController', ['$scope', '$stateParams', '$http', function($scope, $stateParams, $http) {
    console.log($stateParams.id);
    $http.get('js/data/dataSub' + $stateParams.id + '.json').success(function(data) {
        $scope.subCategories = data;
    });
}]);

在subListController中，您会获得带有动态名称的json文件（＆＃39; dataSub＆＃39; + categoryId）。

<强> categories.html

<ion-view view-title="Categories">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="category in categories" href="#/app/categories/{{category.id}}">
        {{category.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

<强> subcategories.html

<ion-view view-title="Sub category">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="subCategory in subCategories">
        {{subCategory.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

<强> data.json

[
    {
        "id": 1,
        "name": "Category A"
    },
    {
        "id": 2,
        "name": "Category 2"
    },
    {
        "id": 3,
        "name": "Category 3"
    },
    {
        "id": 4,
        "name": "Category 4"
    }
]

<强> dataSub1.json

[
    {
        "id": 1,
        "name": "1a"
    },
    {
        "id": 2,
        "name": "2a"
    },
    {
        "id": 3,
        "name": "3a"
    },
    {
        "id": 4,
        "name": "4a"
    }
]

为类别和子类别创建控制器方法

1 个答案: