您的位置：首页 > Web前端 > AngularJS

angular 常用指令的使用

2015-12-01 00:05 746 查看

<!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>

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:"建设路"}]
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航