標籤：技術分享 開始 word styles href char edit users 格式
首先從angular.js的目錄開始，如，知道了我們要學什麼，然後再開始有目的的學習與對比。
1、從運算式開始：
ng-app指令初始化一個 AngularJS 應用程式。
ng-init指令初始化應用程式資料。
2、指令
3、模型
4、$scope範圍
5、控制器
6、過濾器
。。。
7、表單
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="angular.min.js"></script></head><body> <div ng-app="myApp" ng-controller="formController"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module(‘myApp‘, []); app.controller(‘formController‘, function ($scope) { $scope.master = {firstName: "果果", lastName: "糖糖"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script></body></html>
ng-app指令定義了 AngularJS 應用。
ng-controller 指令定義了應用控制器。
ng-model 指令綁定了兩個 input 元素到模型的 user 對象。
formCtrl 函數設定了 master 對象的初始值，並定義了 reset() 方法。
reset() 方法設定了 user 對象等於 master 對象。
ng-click 指令調用了 reset() 方法，且在點擊按鈕時調用。
novalidate 屬性在應用中不是必須的，但是你需要在 AngularJS 表單中使用，用於重寫標準的 HTML5 驗證。
8、輸入驗證
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="angular.min.js"></script></head><body> <h2>驗證demo</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p> 使用者名稱:<br> <input type="text" name="user" ng-model="user" required> <span style="color:black" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">使用者名稱非空</span> </span> </p> <p> 郵箱:<br> <input type="email" name="email" ng-model="email" required> <span style="color:black" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">郵箱非空</span> <span ng-show="myForm.email.$error.email">請輸入正確格式的郵箱</span> </span> </p> <p> <input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> <script> var app = angular.module(‘myApp‘, []); app.controller(‘validateCtrl‘, function($scope) { $scope.user = ‘果果‘; $scope.email = ‘[email protected]‘; }); </script></body></html>
展示如下：
HTML 表單屬性novalidate用于禁用瀏覽器預設的驗證。
9、Boostrap
<!DOCTYPE html><html><link href="bootstrap.min.css" rel="stylesheet" /><script src="angular.min.js"></script><body ng-app="myApp" ng-controller="userCtrl"> <div class="container"> <h3>表格顯示Boostrap和Angular.JS的使用</h3> <table class="table table-striped"> <thead> <tr> <th>編輯</th> <th>名</th> <th>姓</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td> <button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span> 編輯 </button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr> </tbody> </table> <hr> <button class="btn btn-success" ng-click="editUser(‘new‘)"> <span class="glyphicon glyphicon-user"></span> 建立使用者 </button> <hr> <h3 ng-show="edit">建立使用者</h3> <h3 ng-hide="edit">編輯使用者</h3> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">名：</label> <div class="col-sm-10"> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="請輸入您的名"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">姓：</label> <div class="col-sm-10"> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="請輸入您的姓"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密碼：</label> <div class="col-sm-10"> <input type="password" ng-model="passw1" placeholder="請輸入密碼"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">重複密碼：</label> <div class="col-sm-10"> <input type="password" ng-model="passw2" placeholder="請重複輸入密碼"> </div> </div> </form> <hr> <button class="btn btn-success" ng-disabled="error || incomplete"> <span class="glyphicon glyphicon-save"></span> 儲存 </button> </div> <script src="angularDemo.js"></script></body></html>
angular.module(‘myApp‘, []).controller(‘userCtrl‘, function ($scope) { $scope.fName = ‘‘; $scope.lName = ‘‘; $scope.passw1 = ‘‘; $scope.passw2 = ‘‘; $scope.users = [ { id: 1, fName: ‘三‘, lName: "張" }, { id: 2, fName: ‘四‘, lName: "李" }, { id: 3, fName: ‘五‘, lName: "王" }, { id: 4, fName: ‘六‘, lName: "張" }, { id: 5, fName: ‘七‘, lName: "張" }, { id: 6, fName: ‘八‘, lName: "張" } ]; $scope.edit = true; $scope.error = false; $scope.incomplete = false; $scope.editUser = function (id) { //$(‘.form - horizontal‘).show(); if (id == ‘new‘) { $scope.edit = true; $scope.incomplete = true; $scope.fName = ‘‘; $scope.lName = ‘‘; } else { $scope.edit = false; $scope.fName = $scope.users[id - 1].fName; $scope.lName = $scope.users[id - 1].lName; } }; $scope.$watch(‘passw1‘, function () { $scope.test(); }); $scope.$watch(‘passw2‘, function () { $scope.test(); }); $scope.$watch(‘fName‘, function () { $scope.test(); }); $scope.$watch(‘lName‘, function () { $scope.test(); }); $scope.test = function () { if ($scope.passw1 !== $scope.passw2) { $scope.error = true; } else { $scope.error = false; } $scope.incomplete = false; if ($scope.edit && (!$scope.fName.length ||!$scope.lName.length ||!$scope.passw1.length || !$scope.passw2.length)) { $scope.incomplete = true; } };});
Angular.js表單以及與Bootatrap的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
