AngularJs 不显示从控制器填充的列表

AngularJs does not display list populated from a controller

本文关键字：填充 列表 控制器 显示 AngularJs      更新时间：2023-09-26

我正在通过教程视频学习 Angular，但我无法获得以下示例工作。该示例演示如何使用使用 View1 的路由.html该 View1 应显示客户列表（简单名称、城市对象）以及添加、筛选客户的可能性。

当我尝试该示例时，不会显示客户列表 - 我只能看到项目符号和所有标签，文本等，但没有名称列表 - 城市。当我将 View1.html 中的列表替换为硬编码列表时，它会正确显示。

这里可能出了什么问题？

法典

索引.html 

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.js"></script>
<script src="angularTest.js"></script>
</head>
<body>
<div>
    <div ng-view></div>
</div>

</body>
</html>

视图1.html

<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:filter.name | orderBy:city"></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">View 2</a>

视图2.html

<div class="container">
<h2>View 2</h2>
Name:
<br/>
<input type="text" data-ng-model="city"/>
<br/>
<ul>
    <li data-ng-repeat="cust in customers | filter:city | orderBy:city"></li>
</ul>

角度测试.js

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

app.config(function ($routeProvider) {
$routeProvider.when('/',
    {
        controller: 'SimpleController',
        templateUrl: 'partials/View1.html'
    })
    .when('/view2',
    {
        controller: 'SimpleController',
        templateUrl: 'partials/View2.html'
    })
    .otherwise({redirectTo: '/'});
});
app.controller('SimpleController',
function SimpleController($scope) {
    $scope.customers = [
        {name: 'John Doe', city: 'New York'},
        {name: 'Jane Doe', city: 'San Fransisco'},
        {name: 'Joe Smith', city: 'Washington'}
    ];
    $scope.addCustomer = function() {
        $scope.customers.push(
            {
                name: $scope.newCustomer.name,
                city: $scope.newCustomer.city
            }
        );
    };
}
);

在你的 li 元素中 你需要把 

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

您应该在 li 标签内打印一些内容以显示在视图上 {{ }} 为您提供了该特权：-

<li data-ng-repeat="cust in customers | filter:city | orderBy:city">{{cust.name}} ({{cust.city}})</li>
相关文章：