Question

这不显示数据，我正在学习控制器。为什么在我正在观看的视频中显示数据时不显示数据。

<div data-ng-controller="FirstController">
<input type="text" name="txtName" data-ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul  >
    <li data-ng-repeat="person in Customers | orderBy:'name' |  filter:typedName  "> {{ person.name | uppercase}} - {{ person.city }}
    </li>
</ul>
 </div>
<script>
    function FirstController($scope) {
        $scope.Customers = [
            { name: 'Sita', city: 'Los Angeles' },
            { name: 'Ram', city: 'Los Vegas' },
            { name: 'Amit', city: 'San Antonio' },
            { name: 'Cat', city: 'Arkanas' },
            { name: 'Boushick', city: 'Pittsburgh' }
        ];
    }
</script>
<script src="Scripts/angular.min.js"></script>

Answer 1

看起来你正在关注他们正在使用角度1.2的旧视频。

在角度的最新版本中，特定应用程序名称和声明这些模块下的控制器是必需的。虽然您可以通过config激活全局控制器功能，但不建议这样做。

所以你需要做出以下改变：

在您的HTML中，

<html data-ng-app="myApp">

你的JS控制器中没有：

angular.module("myApp", [])
   .controller("ControllerName", function($scope) {
      // declare your $scope data here
   })

为什么不推荐使用全局控制器功能？

当您全局声明控制器函数时，它将污染全局命名空间。假设有另一个库使用相同的函数名，那么你的函数将被覆盖。

例如，

您的文件中有SimpleController个功能。假设您正在使用某些第三方库，它们也使用相同的名称来实现某些功能。

他们设定，

window.SimpleController = window.alert

因此，这意味着您的控制器功能已被覆盖。

这就是为什么它被弃用了。

Answer 2

从您提供的代码中我认为它无效，因为您尚未在javascript中声明Angular Module并通过ng-app将其链接到您的html视图。请检查下面的工作Plunker。

http://plnkr.co/edit/fwwzZwODfZ9G5Ml1Y1MS?p=preview

<body ng-app="myApp">
    <div ng-controller="FirstController">
        <input type="text" name="txtName" ng-model="typedName" />
        <br />
        Typed Name is: {{ typedName }}
        <br />
        Names:
        <ul>
            <li data-ng-repeat="person in Customers | orderBy:'name' |  filter:typedName  ">
                {{ person.name | uppercase}} - {{ person.city }}
            </li>
        </ul>
    </div>
    <script>
        angular.module('myApp', [])
            .controller('FirstController', function($scope) {
                $scope.Customers = [
                    { name: 'Sita', city: 'Los Angeles' },
                    { name: 'Ram', city: 'Los Vegas' },
                    { name: 'Amit', city: 'San Antonio' },
                    { name: 'Cat', city: 'Arkanas' },
                    { name: 'Boushick', city: 'Pittsburgh' }
                ];
            });
    </script>
</body>

角度控制器不显示对象数组数据

2 个答案: