Angular JS:ng-repeat没有显示价值

Question

我是Angular JS的新学员.请帮我找一下这个演示 只显示的原因: {{cust.name| uppercase}} - {{cust.city| lowercase}}而不是显示每个值,

完整代码

    <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']);

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

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

正如@ csjoshi04说,你还需要添加ng-controller="SimpleController"的ul标记,如下所示:

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

您可以在此JSFiddle中检查代码更改.(它会引发一个错误,因为此演示中没有view1.html,但它应该在您的应用程序中工作)