i'm new angularjs using bootstrap. have following html:
<div ng-controller="brandcompanycontroller"> <tabset> <tab ng-repeat="brand in brands" heading="{{brand.name}}" active="brand.active" disable="brand.disabled"> <div ng-controller="modelcontroller" ng-init="init(brand.id)"> <accordion> <accordion-group heading="{{model.model_name}}" ng-repeat="model in models"> insert data here </accordion-group> </accordion> </div> </tab> </tabset> </div> the brand tabs created, however, list of models not created. i'm trying pass brand id model controller using ng-init.
my modelcontroller looks like:
myapp.controller('modelcontroller', ['$scope', 'modelfactory', function ($scope, modelfactory) { $scope.init = function(id) { $scope.brandid = id; console.log("inside init: " + $scope.brandid); } console.log("outside init: " + $scope.brandid); getmodels($scope.brandid); function getmodels(brandid) { modelfactory.getmodels(brandid) .success(function (mdls) { $scope.models = mdls; console.log($scope.mdls); }) .error(function (error) { $scope.status = 'unable load model data: ' + error.message; console.log($scope.status); }); } }]); and factory:
myapp.factory('modelfactory', ['$http', function ($http) { var modelfactory = {}; modelfactory.getmodels = function (id) { return $http({ method: 'get', url: '/models/getmodels', params: { brandid: id } }); }; return modelfactory; }]); the $scope.init in modelcontroller sets $scope.brandid. after that, before call getmodels, $scope.brandid value undefined. doing wrong here?
your $scope.init being called after controller loaded. move getmodels($scope.brandid) call inside function:
$scope.init = function(id) { $scope.brandid = id; console.log("inside init: " + $scope.brandid); getmodels(id); } this happens because first, js loaded , run. $scope.init gets defined, console.log("outside init: " + $scope.brandid); called, , getmodels function called.
then, html finishes loading. around time, ng-init="init(brand.id)" executed.
Comments
Post a Comment