javascript - Angular JS : ng-repeat is not showing value

Question

我是 Angular JS 的新手。请帮我找出原因 this demo仅显示:{{cust.name|大写}} - {{cust.city|小写}}而不是显示每个值，

完整代码

    <div>
            <!-- Placeholder for views -->
            <div data-ng-view=""></div>
        </div>
        Name: <input type="text" data-ng-model="name"/>   
        <br/>
        <h3>Looping with the help of ng-repeat directive</h3>
        <ul>  
            <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
        </ul>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script type="text/javascript">


var app = angular.module('app', []);

                app.config(function ($routeProvider) {
                    $routeProvider.when('/',
                            {
                                controller: 'SimpleController',
                                templateUrl: 'view1.html'
                            })
                            .when('/view2',
                                    {
                                        controller: 'SimpleController',
                                        templateUrl: 'view2.html'
                                    })
                            .otherwise({redirectTo: '/'})
                });
                app.controller('SimpleController', ['$scope', function ($scope) {
                        $scope.customers = [
                            {name: 'Mina', city: 'Bangalore'},
                            {name: 'Tina', city: 'Channai'},
                            {name: 'abrahm', city: 'Mumbai'},
                            {name: 'Zebraman', city: 'Delhi'}
                        ];
                    }]);
        </script>

Answer 1

尝试通过将“ngRoute”添加为依赖模块来在您的应用程序中加载它:

var app = angular.module('app', ['ngRoute']);

并且不要忘记在您的 HTML 中包含 angular-route.js，在 angular.js 之后:

<script src="//code.angularjs.org/1.3.0-beta.13/angular-route.min.js"></script>

正如@csjoshi04所说，你还需要在ul标签中添加ng-controller="SimpleController"，如下:

<div>
  <!-- Placeholder for views -->
  <div data-ng-view=""></div>
</div>
Name:
<input type="text" data-ng-model="name" />
<br/>
<h3>Looping with the help of ng-repeat directive</h3>
<ul ng-controller="SimpleController">
  <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
</ul>

您可以查看代码更改in this JSFiddle . (它会抛出一个错误，因为此演示中没有可用的 view1.html，但它应该适用于您的应用程序)