CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangular-ui-router
shubham0001
shubham0001

Reputation: 63

Not able to display the object array values in the dynamically inserted view using angular Js

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.below the first input 'Name' tab the object array values name and city are not getting dispalyed

Upvotes: 1

Views: 67

Answers (1)

LearnToday
LearnToday

Reputation: 2902

 <ul>
   <li ng-repeat="cust in customers | filter:cust.name">                    
                    {{cust.name}} {{cust.city}}
    </li>
 </ul>

Here is a working plunker

Upvotes: 1

Related Questions