105 lines
2.6 KiB
HTML
105 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<title>Basic options, input & textarea</title>
|
|
|
|
|
|
|
|
<link href="style.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
<!---->
|
|
|
|
<script src="angular1.2.js"></script>
|
|
|
|
<script src="../ngModelOptions.js"></script>
|
|
|
|
<!---->
|
|
|
|
<!---- >
|
|
|
|
<script src="angular1.3.js"></script>
|
|
|
|
<script>angular.module("modelOptions", []);</script>
|
|
|
|
<!---->
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
angular.module('optionsTest', ["modelOptions"])
|
|
|
|
.controller('optionsTest', function ($scope) {
|
|
|
|
|
|
|
|
$scope.tests = {};
|
|
|
|
|
|
|
|
$scope.$watch("tests", function () {
|
|
|
|
console.log("model update", arguments);
|
|
|
|
}, true);
|
|
|
|
|
|
|
|
$scope.clicked = function () {
|
|
|
|
console.log("clicked");
|
|
|
|
}
|
|
|
|
|
|
|
|
$scope.changed = function () {
|
|
|
|
console.log("changed");
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body ng-app="optionsTest" ng-controller="optionsTest">
|
|
|
|
|
|
|
|
<h1>Validation tests</h1>
|
|
|
|
|
|
|
|
<form name="myForm">
|
|
|
|
<label>
|
|
|
|
<strong>Validation & extra arguments, { debounce: 1000 }</strong>
|
|
|
|
<input type="text"
|
|
|
|
name="test"
|
|
|
|
ng-model="tests.one"
|
|
|
|
ng-required="true"
|
|
|
|
ng-maxlength="5"
|
|
|
|
ng-model-options="{ debounce: 1000 }" />
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<pre>tests.one = <span ng-bind="tests.one"></span></pre>
|
|
|
|
|
|
|
|
myForm.test.$valid = {{myForm.test.$valid}}<br>
|
|
|
|
myForm.test.$error = {{myForm.test.$error}}<br>
|
|
|
|
myForm.$valid = {{myForm.$valid}}<br>
|
|
|
|
myForm.$error.required = {{!!myForm.$error.required}}
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<form name="myForm2">
|
|
|
|
<label>
|
|
|
|
<strong>Number - { debounce: 1000 }</strong>
|
|
|
|
<input type="number"
|
|
|
|
name="test"
|
|
|
|
ng-model="tests.two"
|
|
|
|
ng-required="true"
|
|
|
|
ng-model-options="{ debounce: 1000 }" />
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<pre>tests.two = <span ng-bind="tests.two"></span></pre>
|
|
|
|
|
|
|
|
myForm2.test.$valid = {{myForm2.test.$valid}}<br>
|
|
|
|
myForm2.test.$error = {{myForm2.test.$error}}<br>
|
|
|
|
myForm2.$valid = {{myForm2.$valid}}<br>
|
|
|
|
myForm2.$error.required = {{!!myForm2.$error.required}}
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<form name="myForm3">
|
|
|
|
<label>
|
|
|
|
<strong>Date { debounce: 1000 }</strong>
|
|
|
|
<input type="date"
|
|
|
|
name="test"
|
|
|
|
ng-model="tests.three"
|
|
|
|
ng-required="true"
|
|
|
|
ng-model-options="{ debounce: 1000 }" />
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<pre>tests.three = <span ng-bind="tests.three"></span></pre>
|
|
|
|
|
|
|
|
myForm3.test.$valid = {{myForm3.test.$valid}}<br>
|
|
|
|
myForm3.test.$error = {{myForm3.test.$error}}<br>
|
|
|
|
myForm3.$valid = {{myForm3.$valid}}<br>
|
|
|
|
myForm3.$error.required = {{!!myForm3.$error.required}}
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |