例子1: 在输入框中输入信息并动态显示出来:展示它的功能:数据绑定
<input type="text" ng-app ng-model="name"> hi:{{name}}
例子2:
<div ng-app ng-controller="hi"> {{one}} </div> <script type="text/javascript"> function hi($scope){ $scope.one='你好'; } </script>
例子3:创建一个模块(创建控制器)
注意点1:使用ng-controller指令可以将一个控制器对象附加到DOM元素上
注意点2,当我们创建了模块之后我们的ng-app不需要放到全局上面去
<div ng-app="myapp" ng-controller="mycontroller">{{say}}</div> <script type="text/javascript"> var myapp=angular.module('myapp',[]); myapp.controller('controller',function($scope){ $scope.say='你好Angular js!'; }) </script>
例子4:内置指令ng-click 可以将按钮、链接等其他任何DOM元素同点击事件进行绑定 ng-click指令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起
<div ng-app="appone" ng-controller="mycontroller"> <button ng-click="jia(1)">+</button> <button ng-click="jian(1)">-</button> <h4>提示:{{counter}}</h4> </div> <script> var app=angular.module('appone',[]); app.controller('mycontroller',function($scope){ $scope.counter=0; $scope.jia=function(a){ if($scope.counter<9){ $scope.counter+=a } else{ window.location.reload(); //刷新页面 } }; $scope.jian=function(a){ if($scope.counter>0){ $scope.counter-=a } } }) </script>
例子5: $watch进行监听时, AngularJS会对表达式或函数进行运算。
这里涉及到一个新的是知识点:$watch——我们根据名字就知道他是做什么用的:
监视——在这里它的作用是对模型中的数据进行监视,并且当数据发生改变的时候做
相应的响应AngularJS为我们提供了一个非常方便的$watch方法,
它可以帮助我们在每个scope中监视其中的变量
<div ng-app="app"> <input type="text" ng-model="name"> <h4>共计:{{coun}} 字</h4> </div> <script> angular.module('app',[]).run(['$rootScope',function($scope){ $scope.coun=0; $scope.name=''; $scope.$watch('name',function(){ $scope.coun=$scope.name.length; }) }]) </script>
重要
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。
集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。
参数: $index:遍历的进度( 0...length-1 )。
$first:当元素是遍历的第一个时值为true。
$middle:当元素处于第一个和最后元素之间时值为true。
$last:当元素是遍历的最后一个时值为true。
$even:当$index值是偶数时值为true。
$odd:当$index值是奇数时值为true。
例子6:ng-repea
<div ng-app="myApp"> <ul ng-controller="myController"> <li ng-repeat="stu in people"> {{stu.name}} </li> </ul> </div> <script> angular.module('myApp',[]).controller('myController',function($scope){ $scope.people=[ {name:'张三',age:18}, {name:'李四',age:19}, {name:'万物',age:20} ] }) </script>
例子7:点击删除按钮,删除数据
例子8:按照 例子7 ,动态增加一个增加按钮,使数据增加在原数据的后面
<table ng-app="myApp" ng-controller="myController"> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr ng-repeat="stu in people" > <td>{{$index}}</td> <td>{{stu.name}}</td> <td>{{stu.age}}</td> <td><button ng-click="del($index)">删除</button></td> </tr> 例子8: <td><button ng-click="zj()">更多</button></td> </table> <input type="text" ng-model="name"> <script> angular.module('myApp',[]).controller('myController',function($scope){ $scope.people=[ {name:'张三',age:18}, {name:'李四',age:19}, {name:'万物',age:20} ] $scope.del=function(i){ /* alert(i);*/ $scope.people.splice(i,1) } 例子8: $scope.zj=function(){ $scope.tianjia={name:$scope.name} $scope.people.push($scope.tianjia) } }) </script>