以下是index.html文件代码。

Question

我刚开始学习AngularJS。我试图用3个文件index.html和view1.html和view2.html编写这个代码。在index.html中，我定义了模块和控制器功能。在控制器＆＃39; sc＆＃39;我有javascript对象数组有2个字段名称和城市harcoded。我已经使用路由器功能添加了一个新视图，用于用户搜索，我还添加了一个按钮，可以动态地将一对新值插入到对象数组中。

但是我无法在view1和view2中打印名称和城市值。我确定范围有问题，但我无法找到错误。

以下是index.html文件代码。

＆＃13;

<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>

＆＃13;

以下是view1.html文件代码

＆＃13;

  
<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>

＆＃13;

以下是view2.html

＆＃13;

  
<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>

＆＃13;

视图正确加载，但未显示值。

Answer 1

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

这是一个有效的plunker

无法使用角度Js在动态插入的视图中显示对象数组值

以下是index.html文件代码。

以下是view1.html文件代码

以下是view2.html

1 个答案: