标签：
ng-show、ng-hide、ng-if（控制元素显示隐藏，区别在于ng-hide是是否显示隐藏元素，而ng-if是是否移除元素）；
ng-src、ng-class（为元素添加路径和class样式，使用方式请注意）；
ng-checked、ng-selected（控制表单checkbox、radio的选中状态）；
ng-disabled、ng-submit（ng-disabled：控制表单元素的可用状态，ng-submit表单提交时触发事件）。
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS-常用指令使用</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> <style> .img-sm{ width: 72px; } </style> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div class="container" style="width: 600px;" ng-controller="myCtrl"> <form name="f" ng-submit="showinfo(user)"> <h3>基本信息</h3> <div class="form-group" ng-if="user.imgShow"> <img class="img-circle center-block" ng-src="{{user.imgSrc}}" ng-class="{‘img-sm‘:user.smicon}"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="用户名" ng-model="user.uname" required> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="密码" ng-model="user.psw" required> </div> <div class="form-group"> <select class="form-control"> <option value="">--请选择--</option> <option value="" ng-selected="user.position==1">Web开发工程师</option> <option value="" ng-selected="user.position==2">Java开发工程师</option> </select> </div> <div class="form-group"> 性别： <label class="radio-inline"> <input type="radio" name="sex" ng-checked="user.sex==‘boy‘">男 </label> <label class="radio-inline"> <input type="radio" name="sex" ng-checked="user.sex==‘girl‘">女 </label> </div> <h3>爱好</h3> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" ng-checked="hobbycheck(1)">读书 </label> <label class="checkbox-inline"> <input type="checkbox" ng-checked="hobbycheck(2)">爬山 </label> <label class="checkbox-inline"> <input type="checkbox" ng-checked="hobbycheck(3)">篮球 </label> </div> <button type="submit" class="btn btn-primary btn-block" ng-disabled="f.$invalid">注册</button> </form> </div>
<script src="register.js"></script>
</body> </html>
var app = angular.module(‘myApp‘,[]); app.controller(‘myCtrl‘,function($scope){ $scope.user = { imgShow:true, // 是否显示头像图片 imgSrc:‘images/pic02.jpg‘, // 图片路径 smicon:false, // 是否显示小头像图片样式 uname:‘‘, // 用户名 psw:‘‘, // 密码 position:‘1‘, // 职位(默认：Web开发工程师) sex:‘boy‘, // 性别(默认：男) hobby:[1,2] // 爱好(默认：第1、2项勾选) } // 爱好默认勾选方法 $scope.hobbycheck = function(num){ var ischecked = false; for(var i=0; i<$scope.user.hobby.length; i++){ if(num == $scope.user.hobby[i]){ ischecked = true; break; } } return ischecked; } // 提交数据 $scope.showinfo = function(u){ console.log(u); alert(‘注册成功!‘) } })
标签：
原文地址：http://www.cnblogs.com/lvmylife/p/5563198.html
