angularjs 常用指令

基本结构：

//html中：

<div ng-app="app">
     <div ng-controller="ctrl">
         <div></div>
     </div>
</div>      

//js中：

angular.module("app", [])
.controller("ctrl", function ($scope) {
           
})

常用指令：

ng-bind                //单向绑定
ng-model               //双向绑定
ng-show/ng-hide        //显示/隐藏
ng-if                  //不会创建html元素
ng-submit              //表单的提交
ng-disabled            //失效
ng-checked             //单选，复选框
ng-src                 //图片地址
ng-href                //链接地址
ng-class               //class名
ng-selected            //下拉列表选中
ng-change              //值改变时

1.例如输入框中输入内容，点击提交添加到列表中：

//HTML:

<div ng-app="aj" ng-controller="acontroller" >
<input ng-model="task" type="text" />   
<input ng-click="a()" type="button" value="提交" />
<h4 ng-if="tasks.length>0">列表</h4>
<ul style="background-color:aqua;list-style:none;">
<li ng-repeat="item in tasks track by $index">{{item}}
<input ng-click="tasks.splice($index,1)" type="button" value="删除" />
</li>
</ul>
</div>

//JS:

angular.module("app", []).controller("acontroller", function ($scope) {
   $scope.task = "";
   $scope.tasks = [];
   $scope.a = function () {
   $scope.tasks.push($scope.task);
   $scope.task = "";
  }
});

2.几种数据绑定的方式：

<input type="text" ng-model="uname" />   
<h1 >{{uname}}</h1>                         
<div ng-bind="uname"></div>  

3.登录界面:

HTML:

<div ng-app="aj" ng-controller="log">
   <input type="text" ng-model="user.name"/>
   <input type="text" ng-model="user.pwd"/>
   <input type="button" value="登录" ng-click="login()" />
   <h2 ng-show="err.length>0" >{{err}}</h2>
</div>

JS:

    angular.module('aj', [])
        .controller('log', function ($scope) {
            $scope.err = "";
            $scope.user = { name: '', pwd: '' };
            $scope.login = function () {
                if ($scope.user.name == "admin" && $scope.user.pwd == "123") alert("登陆成功!");
                else $scope.err = "用户名或密码错误！";
            }
        })

4.页面刷新时防止出现符号：

标签内加入：ng-cloak
css中：
 [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak.x-ng-cloak {
     display: none !important;
}