Question

我正在学习angularJS并且有一些简单的例子，有2个视图和控制器。我的主页面定义了控制器和路由并显示视图。查看页面应显示文本字段，无序列表，将新数据添加到无序列表。此外，它应根据文本字段中键入的内容过滤<ul>。但是，它会执行除过滤<ul>

之外的所有操作

这是代码：主页：

<body>
<div>
 <div data-ng-view=""></div>   
</div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>

<script type="text/javascript">

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

    demoApp.controller('SimpleController', function ($scope) {
        $scope.customers =
        [
            { name: 'Dave Jones', city: 'Phoenix' },
            { name: 'Jamie Riley', city: 'Atlanta' },
            { name: 'Heedy Wahlin', city: 'Chandler' },
            { name: 'Thomas Winter', city: 'Seattle' }
        ];


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

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

</script>

</body>

这是应显示<ul>的其中一个视图：

<div class="container">
    <h2>View 1</h2>
    Name:
    <br />
    <input type="text" data-ng-model="filter.name" />
    <br />
    <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'name'">
            {{cust.name | uppercase}} - {{cust.city | lowercase}}
        </li>
    </ul>

    <br />
    Customer Name:<br />
    <input type="text" data-ng-model="newCustomer.name" />
    <br />
    Customer City:<br />
    <input type="text" data-ng-model="newCustomer.city" />
    <br />
    <button data-ng-click="addCustomer()">Add Customer</button>
    <br />
    <a href="#/view2">View2</a>
</div>

我在这里缺少什么想法？

感谢的

Answer 1

更改

<input type="text" data-ng-model="filter.name" />

到

<input type="text" data-ng-model="name" />

angularJS - 数据不显示在无序列表中

1 个答案: