常用指令:ng-bind,ng-model,ng-show/hide,ng-if,ng-submit,ng-disabled
ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-change
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS</title> <link rel="stylesheet" href="css/foundation.min.css"> <style type="text/css"> .tx { width: 50px; height: 50px; margin-bottom: 10px; magin-left: 80px; } </style> </head> <body style="padding:10px;" ng-app="app"> <div ng-controller="UserCtrl"> <form name="f" ng-submit="reqister(user)"> <fieldset> <legend>基本信息</legend> <img ng-src="{{user.icon}}" alt="" ng-class="{'tx':user.showicon}" ng-show="user.isShowImg"> <div> <input type="text" ng-model="user.uname" placeholder="用户名" required> <input type="password" placeholder="密码"> 职位:<select> <option value="">--请选择--</option> <option value="1" ng-selected="user.zw == '1'">JAVA工程师</option> <option value="2" ng-selected="user.zw == '2'">.NET工程师</option> </select> 性别: <input type="radio" ng-checked="user.sex == '1'" name="sex"> 男 <input type="radio" ng-checked="user.sex == '0'" name="sex"> 女 </div> </fieldset> <fieldset> <legend>爱好</legend> <div> <input type="checkbox" ng-checked="isChecked(1)" name="ai"> 篮球 <input type="checkbox" ng-checked="isChecked(2)" name="ai"> 足球 <input type="checkbox" ng-checked="isChecked(3)" name="ai"> 排球 </div> </fieldset> <button type="submit" class="button expand" ng-disabled="f.$invalid" >提交</button> </form> </div> </body> <script src="js/angular.min.js"></script> <script src="app.js"></script> </html>
//ng-bind {{}}, ng-model,ng-show/hide,ng-if, //ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-submit,ng-change angular.module('app',[]) .controller('UserCtrl',function ($scope) { $scope.user = { isShowImg:true, showicon:true, icon:'image/logo.jpg', uname:'', pwd:'', zw:'1', sex:'1', aihao:[1,2,3] }; $scope.isChecked = function (n) { var isok = false; for(var i = 0; i < $scope.user.aihao.length; i++){ if(n == $scope.user.aihao[i]){ isok = true; break; } } return isok; } $scope.reqister = function (u) { console.log(u); } })
运行效果: