angular 常用指令的使用 

<!DOCTYPE html>
<html>
<head>
    <title>angular js进阶</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <style type="text/css">
    .tx{
        width:50px;
        height: 50px;
    }
    </style>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller = "myCtr">
<form name="f" ng-submit="register(user)">
<img ng-show="user.isshow" ng-src="{{user.iconImage}}" ng-class="{'tx':user.showIcon}">
<!--图片路径和模型的绑定，注意那2个大括号，就像swift的拆包一样
ng-show:ng-if,ng-hide 作用都一样是否显示某个元素节点
ng－src : 将图片路径和模型绑定起来
ng-class:将css属性和模型绑定起来
ng-bind 和{{}}作用一样，就主要用作显示，类似swift的拆包
ng-model 就是模型的绑定，这个绑定就是双向的了
ng-checked 单选的时候将其与模型相绑定
ng-selected 用于下拉框的模型绑定
ng-disabled 此控件是否可用
ng-submit    提交将模型传过去，我的理解就是为什么要传呢，直接在js的大对象里去拿就是了嘛，没有试验过啦
ng-repeat 循环元素里面有三个属性比较重要$index代表索引，$first , $last ,后面的2个是bool值，当显示第一个的时候$first  为true 同理最后一个
-->
<input type="text" required>
职位:
<select>
<option value="0" ng-selected="user.zw==0">--请选择--</option>    
<option value="1" ng-selected="user.zw==1">ios</option>    
    <option value="2" ng-selected="user.zw==2">java</option>    
</select>
性别：
<input type="radio" name="sex" ng-checked="user.sex==1" >&nbsp;男&nbsp;
<input type="radio" name="sex" ng-checked="user.sex==0">&nbsp;女&nbsp;

爱好
<input type="checkbox" name="aihao" ng-checked="user.isSelect(1)" >&nbsp;游泳&nbsp;
<input type="checkbox" name="aihao" ng-checked="user.isSelect(2)">&nbsp;篮球&nbsp;
<input type="checkbox" name="aihao" ng-checked="user.isSelect(3)" >&nbsp;足球&nbsp;
<input type="checkbox" name="aihao" ng-checked="user.isSelect(4)">&nbsp;排球&nbsp;
<!--这里是用表单的一个内置校验方法-->
<button type="submit" ng-disabled="f.$invalid"> 提交</button>

<ul>
<li ng-repeat="a in addressList" ng-if="!$first">{{$index}}.{{a.addree}}</li>
</ul>
</form>
</body>
<script type="text/javascript" src="../js/app.js">    
</script>
</html>

js

app = angular.module("app",[]);
app.controller("myCtr",function($scope){//自动用上面的值来注入

　　$scope.test = ""
　　$scope.$watch('test',function(){//添加对模型的监听变化
　　　　console.log($scope.test);
　　})

    $scope.user={

     iconImage:"../image/headImage.jpg",
     showIcon : true,
     isshow:true,
     sex : "0",
     zw:"2",
     aihao:[1,2],
     isSelect:function(n){
         var isok=false;
         console.log(this.aihao)
         for (var i=0;i<this.aihao.length;i++){
             if ( n == this.aihao[i]) {
                 isok=true
                 break;
             };
         }
        return isok
     }
    }
    $scope.register=function(u){
        // 这里提交表单，该干嘛就干嘛
    }

    $scope.addressList=[{id:1,addree:"莲桂西路"},
                        {id:2,addree:"龙舟路"},
                        {id:3,addree:"锦华路"},
                        {id:4,addree:"建设路"}]
    })

 

posted @ 2015-12-01 00:05  离子  阅读(281)  评论(0)  编辑  收藏  举报