AngularJS杂记6----ng-controller运用详解(案例)

来源：互联网发布：电脑软件备份工具编辑：程序博客网时间：2024/06/05 03:52

AngularJs 控制器控制 AngularJS应用程序的数据它是常规的js对象
ng-controller 定义控制器

实例：
<body>
//ng-controller定义一个控制器
<div ng-app = "myApp" ng-controller = "myCtrl">
//ng-model绑定输入域到控制器的属性
国家：<input type = "text" ng-model="cuntry">
<br>
首都：<input type = "text" ng-model="city">
<br>
输入的国家首都分别是：{{cuntry+"----"+city}}

</div>

<script>
var app = angular.module('myApp',[]);
//$scope调用控制器保存model对象
app.controller('myCtrl',function($scope){
$scope.cuntry = "中国";
$scope.city = "北京"；
//控制器中也可以写方法
$scope.allInfo = functio(){
return "这是控制器中的方法返回的"
}
});
</script>
</body>

外部文件中的控制器：

新建控制器文件--
angular.module('myApp',[]).controller('ctrl',function(){
$scope.aa = [
{name:'a',sex:'nan'},
{name:'b',sex:'nv'}
];
});
保存文件为 myCont.js
在应用在中使用控制器文件
<div ng-app = "myApp" ng-controller = "ctrl">
<ul>
<li ng-repeat = "x in aa">
{{x.name+"--"+x.sex}}
</li>
</ul>
</div>
<script src = "myCont.js"></script>

阅读全文

0 0