Anurag Anurag - 6 months ago 37
AngularJS Question

How to bind data from controller to view in angular using rest call

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'

})

Answer

you have to create another function in your register.js which call subCategory(). update your code with this it will work.

var categoryId=$stateParams.categoryId;

$scope.categoryData=function(){
 $scope.subCategory(categoryId);
}

and call this function in your registration-2.html.

<md-content ng-init="categoryData()">
        <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>
Comments