<!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" > 男 <input type="radio" name="sex" ng-checked="user.sex==0"> 女 爱好 <input type="checkbox" name="aihao" ng-checked="user.isSelect(1)" > 游泳 <input type="checkbox" name="aihao" ng-checked="user.isSelect(2)"> 篮球 <input type="checkbox" name="aihao" ng-checked="user.isSelect(3)" > 足球 <input type="checkbox" name="aihao" ng-checked="user.isSelect(4)"> 排球 <!--这里是用表单的一个内置校验方法--> <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:"建设路"}] })