AngularJS 创建一个控制器答案

【问题标题】：AngularJS creating a controllerAngularJS 创建一个控制器
【发布时间】：2017-02-22 15:39:55
【问题描述】：

谁能弄清楚为什么这可能不显示？ 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>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你忘记绑定属性

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

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

</li>

【讨论】：