Brand new to this world! Have a look at my html & js code below. Pressing "Add" friend but facing the following hurdles:
- $scope.friends list remains untouched. $scope.newFriend.name, $scope.newFriend.age end up as undefined.
- Also seeking guidance on how to refresh view1 to display the updated list.
----- main.html -----
<!doctype>
<html>
<body>
<div ng-app="demoApp" ng-controller="FriendsController">
<input type="text" ng-model="name">
<p>I'am {{name}} have {{friends.length}} friends. </br>They are:</p>
<input type="search" ng-model="search" placeholder="Find by name/age/gender" /> | <a href="#/add">Add Friend</a>
<div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"> </script>
<script src="Scripts/angular-route.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'view1.html',
controller: 'FriendsController'
}).
when('/add', {
templateUrl: 'view2.html',
controller: 'FriendsController'
}).
otherwise({
redirectTo: '/'
});
}]);
demoApp.controller('FriendsController', function($scope){
$scope.name = "Joeey";
$scope.newFriend = {};
$scope.friends = [
{name:'John', age:25, gender:'boy', sal :100},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Pabtrgick1', age:40, gender:'boy'},
{name:'Pabtrgick2', age:40, gender:'girl'},
{name:'Samantha', age:60, gender:'girl'}
];
$scope.addFriend = function(){
$scope.friends.push({
name : $scope.newFriend.name,
age : $scope.newFriend.age,
gender : $scope.newFriend.gender
})
console.log($scope.friends);
}
});
</script>
</body>
</html>
---- view1.html ---
<ul>
<li ng-repeat="f in friends | filter:search | orderBy:'name'">
[{{$index + 1}}] {{f.name | lowercase}} - {{f.gender | uppercase}} is {{f.age}} years old & salary is {{f.sal}}.
</li>
</ul>
---- view2.html ---
<br/>Name: <input type="text" ng-bind="newFriend.name" />
<br/>Age: <input type="text" ng-bind="newFriend.age" />
<br/>Gender: <input type="text" ng-bind="newFriend.gender" />
<br/><button ng-click="addFriend()">Add</button>
---- EDIT (Added factory method & modified FriendsController) ---
demoApp.factory('friendsFactory', function(){
var friends = [
{name:'John', age:25, gender:'boy', sal :100},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Pabtrgick1', age:40, gender:'boy'},
{name:'Pabtrgick2', age:40, gender:'girl'},
{name:'Samantha', age:60, gender:'girl'}
];
var factory = {};
factory.getFriends = function(){ return friends};
return factory;
});
demoApp.controller('FriendsController', function($scope, $location, friendsFactory){
$scope.name = "Joeey";
$scope.friends = friendsFactory.getFriends();
$scope.addFriend = function(){
$scope.friends.push({
name : $scope.newFriend.name,
age : $scope.newFriend.age,
gender : $scope.newFriend.gender
})
$location.url('/')
}
});