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.

What is app directory structure ?

Amila Sampath
– Amila Sampath

2016-04-18 11:20:05 +00:00
Commented Apr 18, 2016 at 11:20 — Amila Sampath
– Amila Sampath, Commented Apr 18, 2016 at 11:20
All files are in the same dir.

h_h
– h_h

2016-04-18 12:26:57 +00:00
Commented Apr 18, 2016 at 12:26 — h_h
– h_h, Commented Apr 18, 2016 at 12:26

ohboy21 · Accepted Answer · 2016-04-18 12:38:13Z

1

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.

answered Apr 18, 2016 at 12:38

ohboy21

4,3299 gold badges42 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

huseyinozcan · Accepted Answer · 2016-04-18 12:49:53Z

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>

user6199297 · Accepted Answer · 2016-04-18 13:10:59Z

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
});

answered Apr 18, 2016 at 13:10

user6199297

Collectives™ on Stack Overflow

Angular js input models not accessible inside controller

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest