I have successfully populated data from rest call and after that i'm able to get detail of that data by hitting a click event using its id. I'm able to print data in console but unable to bind it in template. Here is my code.
service.js:
(function() {
angular.module('myApp').service('registerService', registerService,restService);
var baseUrl:"http://localhost:xxxxxxxxxxx"
function registerService($q, $http) {
//var category={};
var deferred = $q.defer();
//function to get all category
this.getAllCategory = function () {
//calling json data
return $http.get(baseUrl).then(function (response) {
category = response.data;
deferred.resolve(category);
return deferred.promise;
},
function (error) {
deferred.reject(error);
return deferred.promise;
});
},
//function to get category by id
this.getSubCategory = function (id) {
console.log('inside subcategory');
return $http.get(baseUrl + '/' + id)
.success(function (response) {
deferred.resolve(response.data);
return deferred.promise;
},
function (error) {
deferred.reject(error);
return deferred.promise;
});
};
}
})();
controller.js:
(function () {
angular.module('shoppingPad').controller('registerCtrl', registerCtrl);
function registerCtrl($scope, registerService, $stateParams, $state, Page) {
// var categoryId = $stateParams.categoryId;
$scope.category = null;
$scope.cur_category = null;
//getCategory function to get all category from rest call.
$scope.getCategory = function () {
//setting title for registration
Page.setTitle('Registration');
registerService.getAllCategory().then(function (response) {
$scope.category = response;
console.log($scope.category);
})
};
//passing id to subCategory function to get sub category by id
$scope.subCategory = function (id) {
//setting title for sub-category
Page.setTitle('Sub-Register');
registerService.getSubCategory(id).then(function (data) {
console.log(data);
$scope.cur_category = data;
console.log($scope.cur_category);
$state.go('app.home.register3', {'categoryId': id})
});
};
$scope.signin = function () {
$state.go('app.login.step1')
}
}
})();
registration-2.html:
<md-content ng-controller="registerCtrl">
<h3 class="Select-Sub-category">Select Sub-Category</h3>
<div layout="row" layout="column" flex=100" style="width:200px;">
<div style="margin-left:16px" class="Rectangle-425-Copy-3" flex-gt-sm="50">
<span class="RETAIL">{{cur_category.name}}</span>
</div>
</div>
</md-content>
And in app.js i have defined a state like this:
$stateProvider.state('app.home.register2', {
url: "/register",
templateUrl: 'template/register/registration-1.html',
controller: 'registerCtrl',
})
.state('app.home.register3', {
url: "/register/{categoryId:[0-9]{1,5}}",
templateUrl: 'template/register/registration-2.html',
controller: 'registerCtrl'
})
