了解 AngularJS 中控制器的基础知识

我对AngularJS仍然非常基本(老实说，总的来说，编程。在线观看了一些视频后，我试图通过以下示例来理解控制器概念(例如，传递数组，然后使用 ng-repeat 迭代它(。在过去的一个小时里，它一直在研究这个问题，它可以在没有控制器的情况下工作(例如，使用数组(，但在单独的脚本中添加数组时则不行。谁能帮我在这里找到我的逻辑错误 - 它实际上与视频相同，但我看不到错误(甚至是错字(并觉得这太基本了，我应该让它工作，然后再继续下一步。

非常感谢您的任何帮助：

<html ng-app>
<head><title>My First Page</title></head>
<body >
<div class="container" ng-controller="SimpleController">
Name:
<br />
<input type="text" ng-model="name" />
<br />    
<ul>
<li ng-repeat="cust in customers"> {{ cust.name }} </li>
</ul>
</div>
<script src="script/angular.min.js"></script> 
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
}
</script>
</body>
</html>

您正在使用带有角度 1.1 版本的控制器的全局声明。如果使用 1.3 以上的版本，则应按如下方式声明控制器，

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
});

演示

var app = angular.module('testApp',[]);
app.controller('SimpleController',function($scope){
$scope.customers = [
{ name: 'Simon', lastname: 'Test' },
{ name: 'Thomas', lastname: 'Testi' },
{ name: 'Adi', lastname: 'Testo' },
{ name: 'Adrian', lastname: 'Testo' },
{ name: 'Tomeli', lastname: 'Testi' }
];
});

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

相关内容

最新更新

热门标签：