AngularJs指令总结二

先讲下模块化,上一篇的所有都是普通模块,就是HTML里面现有一个ng-controller 然后JS里面再设一个与之同名的方法,如此绑定数据,这样的做法不是很好,问题在于太多全局变量不利于代码管理。

模块化的做法:

1 由一个模块替代一个控制器,ng-app先声明一个模块。

2 JS中这样写 app=angular.module(“myapp”,[])

                 app.controller(“mycontr”,function($scope){

})

好了 后面的代码都用模块化写法,良好习惯

ng-repeat

<div ng-app="myApp">
 <div ng-controller="myContr">
     <ul>
         <li ng-repeat="x  in names" >
           {{  x.name + ', ' + x.country  }}
         </li>
     </ul>
 </div>
</div

<script>
    var app=angular.module("myApp",[]);
      app.controller("myContr",function($scope){
        $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
    })
</script>

下面是关于input的一些指令

<div ng-controller="firstController">
        <input type="text" ng-value="text" ng-disabled="isDisabled"/>
        <input type="text" value="{{text}}" ng-readonly="isDisabled"/>
        <input type="checkbox" value="{{text}}" ng-checked="isDisabled"/>
    </div>


app.controller("firstController",["$scope","$interval",function($scope,$interval){
        var iNow=5;
        $scope.text=iNow+"s";
        $scope.isDisabled=true;
        var timer=$interval(function(){
            iNow--;
            $scope.text=iNow+"s";
            if(iNow===0){
                $interval.cancel(timer);
                $scope.text="可以点击啦";
                $scope.isDisabled=false;

            }
        },1000)

原文地址:https://www.cnblogs.com/liuestc/p/4954308.html