【问题标题】：Not able to display the object array values in the dynamically inserted view using angular Js无法使用角度 Js 在动态插入的视图中显示对象数组值
【发布时间】：2016-09-27 12:36:15
【问题描述】：

我刚刚开始学习 AngularJS。我正在尝试使用 3 个文件 index.html 和 view1.html 和 view2.html 编写此代码。在 index.html 中，我定义了模块和控制器功能。在控制器“sc”中，我有 javascript 对象数组，其中包含 2 个字段名称和城市编码。我已经使用路由器功能添加了一个新视图，用户将使用该视图进行搜索，并且我还添加了一个按钮以将一对新值动态插入到对象数组中。

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

下面是index.html文件代码

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

下面是view1.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>

下面是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>

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

【问题讨论】：

你为什么要做|filter:filter.name？ ng-repeat 中的 filter.name 是什么？
我尝试使用 name1 而不是 filter.repeat 但问题仍然相同。 filter.name 从用户那里获取输入值，并使用它搜索对象数组 customers 并显示相关结果。
您的 html 中有错字。您在cutomers 上执行ng-repeat，但在您的$scope 上称为customers
@devqon 感谢您的帮助。从早上起我就陷入了这种混乱，无法发现我的这个愚蠢的错误。

标签： javascript angularjs angularjs-scope angular-ui-router

【解决方案1】：

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

这是一个有效的plunker

【讨论】：