关闭

Angular JS

标签: Angular JSangular数据js
160人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:206次
    • 积分:21
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档