CODEWITHSUNDEEP
angularjsjsonionic-framework
tsp
tsp

Reputation: 1

Creating controller method for categories and subcategories

I am working on an app where I can have a list of categories as my home and the when someone clicks on the category option, a list subcategory is shown. the catch is that I want the categories to have their own .json file and the list subcategory with its own. how would that controller look, I am very new to angularjs but loving it so much. Example Category A has subcategories 1a, 2a, 3a, 4a.

Anyway help will be greatly appreciated.

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

So this below is my controller for categories, I was hoping that if there is a way to have another controller for the subcategories from another .json file

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

Upvotes: 0

Views: 1027

Answers (1)

Davide Pastore
Davide Pastore

Reputation: 8738

You can have a subcategories json for each category.

This is a 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;
    });
}]);

In subListController you get the json file with a dynamic name ('dataSub' + 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"
    }
]

Upvotes: 0

Related Questions