Angular JS

原创 2015年07月09日 22:56:55

例子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

  • 2017年11月05日 16:17
  • 16.43MB
  • 下载

angular-sanitize.min.js

  • 2017年10月24日 16:09
  • 6KB
  • 下载

swiper.js在angular里使用的一些问题

因为项目的框架用的是angular,而轮播用的是swiper.js,这个插件做轮播很高效和实用,不过可能angular也不是很熟,照着官方文档把swiper.js引入的时候,发现第一张图片永远是一闪而...

angular.js

  • 2015年03月27日 16:58
  • 927KB
  • 下载

angular.min.js

  • 2016年01月22日 16:29
  • 150KB
  • 下载

UI-Router:为什么开发者都不喜欢Angular.js内置的路由

Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的 UI-Router模块来代替之。这是因...

angular.js-master

  • 2015年09月10日 11:54
  • 8.76MB
  • 下载

angular.js 1.3.15

  • 2015年04月30日 11:52
  • 123KB
  • 下载

《Angular JS 权威教程》 - 内置指令

一、基础ng指令 1.ng-disable,使用ng-disabled可以把disabled属性绑定到以下表单输入字段上: ;  ;  ;  普通HTML,在以下表单控件中只要出现了dis...
  • xxcbsha
  • xxcbsha
  • 2016年04月19日 08:40
  • 627

angular-1.0.1.min.js

  • 2015年06月30日 17:27
  • 102KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular JS
举报原因:
原因补充:

(最多只允许输入30个字)