Question

任何人都可以找出为什么这可能不显示？ View1.html和View2.html文档位于partials文件夹中。有时候我只是得到一个完全空白的屏幕，有时候我会得到一个名字：和文本框，有时候我得到了View1但从来没有得到客户名称。感谢..

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<base href="/"> <!-- needed for Angular HTML 5 mode -->
    <title>Angular Todo</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.css">
    <script type="text/javascript" src="http://localhost:8080/bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="http://localhost:8080/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://localhost:8080/bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="http://localhost:8080/bower_components/angular-route/angular-route.js"></script>
    </script>

    <style>
    .container{
        padding: 20px;
        background-color: green;
    }

    </style>

</head>
<body>
    <div>
        <div data-ng-view></div>

    </div>

        <script>

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

            demoApp.config(function ($routeProvider){
                $routeProvider
                .when('/',
                {
                        controller: 'SimpleController',
                        templateUrl: 'Partials/View1.html'
                })
                .when('/view2',
                {
                        controller: 'SimpleController'
                        templateUrl: 'Partials/View2.html'
                })
                .otherwise({ redirectTo: '/'});

            });


                demoApp.controller('SimpleController', function ($scope) {
                $scope.customers = [{ 
                        name: 'John Doe', city: 'New York' 
                    }, 
                    { 
                        name: 'John Smith', city: 'Phoenix' 
                    }, 
                    { 
                        name: 'Jane Doe', city: 'San Francisco' 
                    }
                    ];

                    $scope.addCustomer= function (){
                        $scope.customers.push(
                            { name: $scope.newCustomer.name. city: $scope.newCustomer.city
                            });
                    };
                });

        </script>



<script src='js/controller.js'></script>

</body>
</html>

Answer 1

试试这个

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

控制器

$scope.name = 'Saurabh';

Answer 2

您没有显示任何内容。试试这个

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

var demoApp = angular.module('demoApp', []);

demoApp.controller('SimpleController', function($scope) {
  $scope.customers = [{
      name: 'John Doe',
      city: 'new york'
    },
    {
      name: 'john smith',
      city: 'phoenix'
    },
    {
      name: 'jane doe',
      city: 'san francisco'
    }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" class="container" data-ng-controller="SimpleController">

  Name:
  <br />
  <input type="text" data-ng-model="name" />
  <br />
  <ul>
    <li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'">
    {{cust.name}}:{{cust.city}}
    </li>
  </ul>

</div>

Answer 3

您忘记绑定属性

<li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'">

         <span ng-bind="cust.name"></span>

</li>

AngularJS创建一个控制器

3 个答案: