Question

我是Angular JS的新学员。请帮助我找出this demo仅显示{{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

尝试加载＆＃39; ngRoute＆＃39;在您的应用程序中，将其添加为依赖模块：

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>

您可以检查代码更改in this 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
          });

        };
      }]);

现在加载＆＃34; /＆＃34; controller与$ scope绑定，但我们还需要将控制器添加到你需要的html元素。

这是您错过绑定的代码＆＃34; ng-controller＆＃34;

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

使用下面的代码。 code

修改您可以通过以下方式使其工作： -

在当前html所在的同一文件夹中创建view1.html。

然后创建Partial文件夹并在Partial folder
中创建一个名为view2.html的文件
点击此网址访问view1 http://yoursitename.com/index.html#/

点击此按钮访问view2 url http://yoursitename.com/index.html#/view2

编辑2 这是因为您正在迭代的客户数据是在SimpleController中，在您进行ng-repeat时不可用。 SimpleController仅适用于view1和view2。在编写ng-repeat之前，在<ul>标记中写入ng-controller =“SimpleController”。它应该工作。

Answer 6

检查我得到它的代码片段.. 3件事都错了：

未添加角度路线脚本标记

<强> http://code.angularjs.org/1.3.0-beta.13/angular-route.min.js
忘记在模块中添加ngRoute注入

var app = angular.module（'app'，['ngRoute']）;
你的名字过滤器在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

像angular.module一样注入ngRoute（＆＃39; app＆＃39;，[＆＃39; ngRoute＆＃39;]）;你的代码就像魅力一样。！

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

7 个答案: