ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。
ng-controller指令:控制器
ng-init 指令 :ng-init 指令初始化一个AngularJS应用程序的数据。
ng-repeat 指令:ng-repeat 指令重复html元素集合中的每个项目。常用于数组的迭代便利。将控制器定义在模块儿下,将属性和函数定义在控制器下
<script type="text/javascript"> //定义模块 var app = angular.module("pyg",['用于引入插件']); //把函数定义模块下 app.controller('helloController',function($scope){ //定义添加方法 $scope.add = function(a,b){ return parseInt(a)+parseInt(b); } //定义查询方法 $scope.findAll = function(){ return "this is findAll"; } }) </script> </head> <body ng-app="pyg"> <div ng-controller="helloController"> a:<input type="text" ng-model="a"/> {{a}}<br> b:<input type="text" ng-model="b"/> {{b}}<br> 打印结果:{{add(a,b)}}<br> 调用查询方法:{{findAll()}} </div> </body>studentController如下:
<script> function studentController($scope) { $scope.student = { firstName: "yiibai", lastName: "com", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script>studentController 定义 scope作为JavaScript对象参数。 s c o p e 作 为 J a v a S c r i p t 对 象 参 数 。 scope 表示应用程序,使用studentController对象。
$scope.student 是studentController对象的属性。
firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
fullName 是$scope.student对象的函数,它的任务是返回合并的名称。
在fullName函数中,我们现在要学生对象返回组合的名字。
作为一个说明,还可以定义控制器对象在单独的JS文件,并把有关文件中的HTML页面。
现在可以使用ng-model或使用表达式如下使用studentController学生的属性。
Enter first name: <input type="text" ng-model="student.firstName"><br> Enter last name: <input type="text" ng-model="student.lastName"><br> <br> You are entering: {{student.fullName()}}ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。
<title>angularJS数据双向绑定</title> <script type="text/javascript" src="plugins/angularjs/angular.min.js"></script> </head> <body ng-app> 姓名:<input type="text" ng-model="username"/> 用户姓名:{{username}}ng-init 指令 :ng-init 指令初始化一个AngularJS应用程序的数据。
<body ng-app ng-init="myname='唐僧去西天取经不得不说故事?'"> 姓名:<input type="text" ng-model="myname"><br> 获取值:{{myname}} </body>ng-repeat 指令:ng-repeat 指令重复html元素集合中的每个项目。常用于数组的迭代便利。 循环数组
<script type="text/javascript"> //定义模块 var app = angular.module("pyg",[]); //把函数定义模块下 app.controller('userController',function($scope){ //定义变量 $scope.list = [12,23,56,88,99]; }) </script> </head> <body ng-app="pyg"> <div ng-controller="userController"> <h1 ng-repeat="x in list"> {{x}} </h1> </div> </body>循环对象
<script type="text/javascript"> //定义模块 var app = angular.module("pyg",[]); //把函数定义模块下 app.controller('userController',function($scope){ //定义变量 $scope.list = [{name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56}]; }) </script> </head> <body ng-app="pyg"> <div ng-controller="userController"> <h1 ng-repeat="entity in list"> {{entity.name}} // {{entity.shuxue}} // {{entity.yuwen}} </h1> </div> </body>