Angular js input models not accessible inside controller
Question
I am using this code to view and add peoples in an array.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
add.html
<h1>Add</h1>
<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">
<br />
<button ng-click="add()">Add</button>
<hr />
<a href="#/">Back</a>
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
});
});
app.controller('Ctrl', function($scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
The problem is, I am not getting data from ng-model="new_name" into the controller method $scope.add = function() . After pressing add button only blank strings gets pushed into array. However the model and controller working perfectly without routing and ng-view directive. I think its scope related problem. Can any body help me in this. Thanks.
3 answers
solution1
1 2016-04-18 12:38:13
Because you should specify the controller for each view. So try doing this:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
A better solution would be to have a separate controller for each view. Also, have a look at the $routeProvider documentation .
solution2
1 2016-04-18 12:49:53
Just delete <div ng-controller="Ctrl"> from index.html and add a controller attribute for your route.
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($location,$scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
solution3
0
first you have to wrap your inputs with <form> tag with name='' attribute. Next step is to give name='' attributes for each <input> tag. Look:
<form name='myLoginForm'>
<input name='nick' ng-model='loginFormModel.nick'>
<input name='password' ng-model='loginFormModel.password'>
</form>
In controller:
app.controller('Ctrl', function($location,$scope) {
$scope.loginFormModel = {}; //now you have whole values from view in this variable, for example nick is available in $scope.loginFormModel.nick
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.