Angular JS

例子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>  
阅读更多
个人分类: Angular JS
想对作者说点什么? 我来说一句

angular.js-1.6.9

2018年04月27日 21.24MB 下载

angular-1.3.9.zip

2015年03月06日 9.02MB 下载

angular-1.3.5.zip

2015年03月06日 9.01MB 下载

angular-1.0.8.zip

2015年03月06日 3.84MB 下载

angular-1.3.14.zip

2015年03月06日 9.04MB 下载

Angular JS Essentials

2015年11月09日 1.08MB 下载

Angular JS in Action

2016年02月07日 5.73MB 下载

Angular JS RequireJS

2014年12月09日 172KB 下载

AngularJS in Action

2016年09月19日 6.09MB 下载

angular js最新版

2014年10月22日 1.05MB 下载

没有更多推荐了,返回首页

不良信息举报

Angular JS

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭