Angular JS：ng-repeat沒有顯示價值

Question

我是Angular JS的新學員。 請幫我找出為什么這個演示只顯示： {{cust.name| uppercase}} - {{cust.city| lowercase}} {{cust.name| uppercase}} - {{cust.city| lowercase}} {{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-route.js 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，但它應該在您的應用程序中工作）

Answer 2

讓我們嘗試這個： -

您需要添加angular-route.min.js以在Angular.js中實現路由。

Angular服務是由服務工廠創建的單例對象。 這些服務工廠是由服務提供商創建的功能。 服務提供者是構造函數。 實例化時，它們必須包含一個名為$ get的屬性，該屬性包含服務工廠函數。

要在Angular.js中實現路由，您需要通過$ routeProvider設置配置，$ routeProvider是$ routeService的提供者，它有助於組合控制器，視圖模板和URL映射。

首先你在創建應用程序時錯過了依賴注入ngRoute並且還添加了（相應的Js文件）angular-route.min.js

這是你的代碼

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

這是更新的代碼，

var app = angular.module('app', ['ngRoute']);
      app.config(function($routeProvider) {
        $routeProvider.when('/', {
            controller: 'SimpleController',
            templateUrl: 'view1.html'
          })
          .when('/view2', {
            controller: 'SimpleController',
            templateUrl: 'Partial/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'
        }];
        $scope.addCustomer = function() {
          $scope.customers.push({
            name: $scope.newCustomer.name,
            city: $scope.newCustomer.city
          });

        };
      }]);

現在，一旦加載“/”控制器與$ scope綁定，但我們還需要將控制器添加到您需要的html元素。

這是您錯過綁定“ng-controller”的代碼

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

這里是更新的代碼： -

    <ul ng-controller="SimpleController">
          <li data-ng-repeat="cust in customers| filter:name | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li>
   </ul>

Answer 3

看看： http ： //plnkr.co/edit/IkApZKO3ynEfIq1Stw4A?p=preview

取出塊

app.config(function ($routeProvider) {
    $routeProvider.when('/',
            {
                controller: 'SimpleController',
                templateUrl: 'view1.html'
            })
            .when('/view2',
                    {
                        controller: 'SimpleController',
                        templateUrl: 'Partial/view2.html'
                    })
            .otherwise({redirectTo: '/'})
});

我沒有看到你在任何地方使用視圖。 此外，您需要將ng-controller指令添加到HTML 。

Answer 4

從索引文件Project中的ng-controller插入data-ng-view。

Answer 5

問題在於

app.config(function ($routeProvider) {
                        $routeProvider.when('/',
                                {
                                    controller: 'SimpleController',
                                    templateUrl: 'view1.html'
                                })
                                .when('/view2',
                                        {
                                            controller: 'SimpleController',
                                            templateUrl: 'Partial/view2.html'
                                        })
                                .otherwise({redirectTo: '/'})
                    });

這段代碼無法找到您在代碼中使用的templateUrl。

使用下面的代碼。 碼

編輯您可以通過以下方式使其工作： -

1. 在當前html所在的同一文件夾中創建view1.html。
2. 然后創建Partial文件夾並在Partial文件夾中創建一個名為view2.html的文件
3. 點擊此網址訪問view1 http://yoursitename.com/index.html#/
4. 通過點擊此URL訪問view2 http://yoursitename.com/index.html#/view2

編輯2那是因為您正在迭代的客戶數據是在SimpleController中，在您進行ng-repeat時不可用。 SimpleController僅適用於view1和view2。 在編寫ng-repeat之前，在<ul>標記中寫入ng-controller =“SimpleController”。 它應該工作。

Answer 6

檢查我得到它的片段.. 3件事是錯的：

1. 沒有添加角度路線腳本標簽

   http://code.angularjs.org/1.3.0-beta.13/angular-route.min.js

2. 忘了在模塊中添加ngRoute注入

   var app = angular.module（'app'，['ngRoute']）;

3. 你的名字過濾器在ng-repeat上是錯誤的。

   data-ng-repeat =“客戶中的cust | filter：{name：name} | orderBy：'name'”

  var app = angular.module('app', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider.when('/', { controller: 'SimpleController', templateUrl: 'view1.html' }) .when('/view2', { controller: 'SimpleController', templateUrl: 'Partial/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'} ]; $scope.addCustomer = function () { $scope.customers.push( { name: $scope.newCustomer.name, city: $scope.newCustomer.city }); }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.0-beta.13/angular-route.min.js"></script> <html data-ng-app="app" > <!-- Directive --> <body 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> Name:{{name}} <ul> <li data-ng-repeat="cust in customers| filter:{name: name} | orderBy:'name'"> {{cust.name| uppercase}} - {{cust.city| lowercase}} </li> </ul> </body> </html> 

Answer 7

注入angularRoute，如angular.module（'app'，['ngRoute']）; 而你的代碼將像魅力一樣工作。