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

最新推荐文章于 2024-03-30 09:52:00 发布

aigoV

最新推荐文章于 2024-03-30 09:52:00 发布

阅读量666

点赞数

分类专栏： AnjularJS 文章标签： AngularJS入门 angularJS ng-controller案例 angularJS控制器如何使用 AngularJS指令

本文链接：https://blog.csdn.net/aigoV/article/details/77851756

版权

AnjularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>