I have just started to learn AngularJS. I am trying to write this code with 3 files index.html and view1.html and view2.html . In index.html I have defined the module and controller function.In the controller 'sc' i have javascript object array with 2 fields name and city harcoded. I have used the router functionality to add a new view which will be used to search by the user and i have also added a button to dynamically insert a new pair of values into the object array.
But i am unable to print the name and city values in the view1 and view2. I am sure there is some problem with the scope but i am unable to find the error.
Below is the index.html file code.
<html ng-app="demo" >
<head>
<title>AngularStuff!!!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<!-- <div ng-controller='sc'>
</div>-->
<div ng-controller="sc">
<div ng-view=" "></div>
</div>
<script>
var demo=angular.module('demo',['ngRoute']);
demo.controller('sc',function($scope){
$scope.customers=[
{name:'Johnny',city:'ab'},
{name:'Jane',city:'ab'},
{name:'Apple',city:'tv'},
{name:'Clarice',city:'ku'},
{name:'Clayton',city:'lm'}
];
$scope.add=function()
{
$scope.customers.push({name:$scope.n.name,city:$scope.n.city}) ;
};
}
);
demo.config(
function($routeProvider)
{
$routeProvider
.when('/',
{
controller:'sc',
templateUrl:'View1.html'
}
)
.when('/View2',
{
controller:'sc',
templateUrl:'View2.html'
}
)
.otherwise({redirectTo:'/'});
}
);
</script>
</body>
</html>Below is the view1.html File Code
<div >
<h2 align="center">View1</h2>
Name:
<input type="text" ng-model="filter.name"/>
<ul>
<li ng-repeat="cust in cutomers|filter:filter.name">
{{cust.name}}--{{cust.city}}
</li>
</ul>
Customer Name:
<input type="text" ng-model="n.name"/>
<br/>
Customer City:
<input type="text" ng-model="n.city"/>
<br/>
<button ng-click="add()">Add Customer</button>
<a href="View2.html">View2</a>
</div>
Below is the view2.html
<div >
<h2 align="center">View1</h2>
Name:
<input type="text" ng-model="filter.name"/>
<ul>
<li ng-repeat="cust in cutomers|filter:filter.name">
{{cust.name}}--{{cust.city}}
</li>
</ul>
Customer Name:
<input type="text" ng-model="n.name"/>
<br/>
Customer City:
<input type="text" ng-model="n.city"/>
<br/>
<button ng-click="add()">Add Customer</button>
<a href="View2.html">View2</a>
</div>
The views are loading properly but the values are not getting displayed.
ng-repeatovercutomers, but it is calledcustomerson your$scope