query elemnet
angular.element($0).scope()
angular.element($0).scope().model.text
資料來源
http://blog.darkthread.net/post-2014-10-12-angular-notes-19-validation.aspx
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="utf-8">
<title>Lab 17 - 資料檢核</title>
<style>
body, input
{
font-size: 9pt;
}
form .ng-invalid.ng-dirty { background-color: pink; }
form .ng-valid.ng-dirty { background-color: lightgreen; }
.invld-hint { color: red; }
.invld-hint span { margin-right: 6px; }
</style>
</head>
<body ng-controller="defaultCtrl">
<form name="myForm">
<p>
請輸入文字:
<input name="text" ng-model="model.text" required />
</p>
<p>
請輸入電子郵件:
<input type="email" name="emailAddr" ng-model="model.emailAddr" required />
<span class="invld-hint"
ng-show="myForm.emailAddr.$invalid && myForm.emailAddr.$dirty">
<span ng-show="myForm.emailAddr.$error.email">Email格式不正確</span>
<span ng-show="myForm.emailAddr.$error.required">必填欄位</span>
</span>
</p>
<p>
請輸入4-6位英數字
<input type="text" name="code" ng-model="model.code" ng-minlength="4" ng-maxlength="6"
ng-pattern="model.codePattern" />
<span class="invld-hint" ng-show="myForm.code.$error.pattern">需為0-9, A-Z, a-z</span>
</p>
<p>
輸入內容={{model | json}}
</p>
<div>
表單狀態:
$pristine={{myForm.$pristine}},
$dirty={{myForm.$dirty}},
$valid={{myForm.$valid}}, <br />
$error={{myForm.$error | json}}
</div>
<hr />
<input type="submit" value="送出" ng-disabled="myForm.$invalid" />
<input type="button" value="Debug" ng-click="model.debug()" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script>
angular.module("sampleApp", [])
.controller("defaultCtrl", function($scope) {
function myViewModel() {
var self = this;
self.text = "";
self.emailAddr = "";
self.code = "";
self.codePattern = new RegExp("^[0-9a-zA-Z]*$");
}
$scope.model = new myViewModel();
});
</script>
</body>
</html>
沒有留言:
張貼留言