javascript - route and $scope variable in angularjs -
i having few problems codes, created module demoapp example, following:
<html ng-app="demoapp"> <head> <title>customer - order example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div ng-view=""></div> <script type="text/javascript" src="libs/angular.min.js"></script> <script type="text/javascript" src="libs/angular-route.js"></script> <script type="text/javascript"> var demoapp = angular.module('demoapp', ['ngroute']); demoapp.config(function($routeprovider){ $routeprovider .when('/order', { controller: 'usercontroller', templateurl: 'partials/order.html' }) .when('/user', { controller: 'usercontroller', templateurl: 'partials/user.html' }) .otherwise({redirectto: '/user'}); }); demoapp.factory('simplefactory', function() { var orders = [{id: 1, title: 'order1', quantity: 10, user_id: 1}, {id: 2, title: 'order2', quantity: 10, user_id: 1}, {id: 3, title: 'order3', quantity: 10, user_id: 1}, {id: 4, title: 'order1', quantity: 10, user_id: 2}, {id: 5, title: 'order1', quantity: 10, user_id: 2}, {id: 6, title: 'order1', quantity: 10, user_id: 2}]; var factory = {}; factory.getorders = function() { return orders; }; return factory; }); demoapp.controller('usercontroller', function($scope, simplefactory){ $scope.users = [{id: 1, name: 'user1', email: 'user1@yopmail.com', age: 27}, {id: 2, name: 'user2', email: 'user2@yopmail.com', age: 27}, {id: 3, name: 'user3', email: 'user3@yopmail.com', age: 27}, {id: 4, name: 'user4', email: 'user4@yopmail.com', age: 27}, {id: 5, name: 'user5', email: 'user5@yopmail.com', age: 27}, {id: 6, name: 'user6', email: 'user6@yopmail.com', age: 27}, {id: 7, name: 'user7', email: 'user7@yopmail.com', age: 27}, {id: 8, name: 'user8', email: 'user8@yopmail.com', age: 27}, {id: 9, name: 'user9', email: 'user9@yopmail.com', age: 27}]; $scope.orders = simplefactory.getorders(); $scope.adduser = function() { $scope.users.push({id: $scope.users.length, name: $scope.newname, email: $scope.newemail, age: $scope.newage}); }; $scope.ordersofuser = []; $scope.redirectorder = function(userid) { angular.foreach($scope.orders, function(value, key){ if(value.user_id === userid) { $scope.ordersofuser.push(value); } }); return $scope.ordersofuser; }; }); </script> </body> </html> but dont know why orderofuser empty when invoked in order.html template file..
order.html file:
<div ng-controller="usercontroller"> <table> <thead> <tr> <td>title</td> <td>quanity</td> </tr> </thead> <tbody ng-repeat="order in ordersofuser"> <tr> <td>{{order.title}}</td> <td>{{order.quantity}}</td> </tr> </tbody> </table> <a ng-href="#/user" /> user </a> </div> user.html file:
<div ng-controller="usercontroller"> <form ng-submit="adduser()"> <label for="name"> name </label> <input ng-model="newname" /> <label for="name"> email </label> <input ng-model="newemail" /> <label for="name"> age </label> <input ng-model="newage" /> <input type="submit" value="add" /> </form> <ul ng-repeat="user in users"> <li> <p>{{user.name}}</p> <p>{{user.email}}</p> <p>{{user.age}}</p> <a ng-href="#/order" ng-click="redirectorder(user.id)">order</a> </li> </ul> </div> thanks in advance
it's blank because never populate it:
$scope.ordersofuser = []; the code touches field $scope.redirectorder function, never called.
edit after comment
you using same controller both routes. means when change routes, controller re-instantiated. such, when navigate /user /order, line gets called again:
$scope.ordersofuser = []; this called after redirectorder function, clears out.
what should instead use service store sort of information, inject 2 separate controllers, 1 orders page , 1 users page.
Comments
Post a Comment