标签：style color io 使用 ar java for sp 数据
Forms
为了让form以及控件、ngModel富有样式，可以增加以下class：
通过在元素上添加repuired angularjs自动更具状态切换这些class
ng-valid (验证成功)
ng-invalid （验证失败）
ng-pristine(从未输入过)
ng-dirty(输入国)
在angular中，表单是FormController的一个实例。表单实例可以随意地使用name属性暴露到scope中（只可意会，不可言传啊。。）
<!DOCTYPE HTML>
<html ng-app="ControlState">
<head>
<meta charset="UTF-8">
<title>ControlState</title>
<style type="text/css">
.ng-cloak {
display: none;
}
.css-form input.ng-invalid.ng-dirty {
background-color: #fa787e;
}
.css-form input.ng-valid.ng-dirty {
background-color: #78fa89;
}
</style>
</head>
<body>
<div ng-controller="MyCtrl">
<form novalidate name="formName">
名字: <input ng-model="user.name" name="userName" type="text" required><br/>
<div ng-show="formName.userName.$dirty&&formName.userName.$invalid">
<span>请填写名字</span>
</div>
Email: <input ng-model="user.email" name="userEmail" type="email" required><br/>
<div ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示:
<span ng-show="formName.userEmail.$error.required">请填写Email</span>
<span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span>
</div>
性别: <input value="男" ng-model="user.gender" type="radio">男
<input value="女" ng-model="user.gender" type="radio">女
<br/>
<input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意：
<input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/>
<br/>
<div ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</div>
<button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
<button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>saved = {{saved | json}}</pre>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module("ControlState", []);
app.controller("MyCtrl", function ($scope,$window) {
$scope.saved = {};
$scope.update = function(user) {
$scope.saved = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.saved);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.saved);
};
$scope.reset();
});
</script>
</body>
</html>
custrom Validation
Model到View更新 无论什么时候Model发生改变，所有的ngModelController.$formatters(model发生改变时触发数据有效验证和格式化转变)数组中的function将排队执行，所以在这里每一个function都有机会去格式化model的值，并且通过NgModelController.$setValidity修改空间的验证状态。
View到Model更新 无论任何时候用户与控件发生交互，将会触发NgModelCtroller.$setViewValue。这时候轮到执行NgModelController.$parsers(当控件从dom取值之后，将会执行这个数组中的所有方法，对值进行审查过滤或转换，也进行验证)数组中的所有方法。
在下面的例子中我们将创建两个directive。
第一个是integer，它负责验证输入到底是不是一个有效的整数。例如1.23是一个非法的值，因为它包含小数部分。注意，我们通过在数组头部插入（unshift）来代替在尾部插入（push），这因为我们想它首先执行并使用这个控件的值（估计这个Array是当作队列来使用的），我们需要在转换发生之前执行验证函数。
第二个directive是smart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意，我们在这不可以使用HTML5的input类型”number”，因为浏览器不允许用户输入我们预期的非法字符，如”1,2”（它只认识”1.2”）。
<!DOCTYPE HTML>
<html ng-app="CustomValidation">
<head>
<meta charset="UTF-8">
<title>CustomValidation</title>
<style type="text/css">
.ng-cloak {
display: none;
}
.css-form input.ng-invalid.ng-dirty {
background-color: #fa787e;
}
.css-form input.ng-valid.ng-dirty {
background-color: #78fa89;
}
</style>
</head>
<body>
<div>
<form novalidate name="formName">
<div>
大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}{{formName.size.$error.integer}}<br/>
<span ng-show="formName.size.$error.integer">这不是一个有效的整数</span>
<span ng-show="formName.size.$error.min || formName.size.$error.max">
数值必须在0到10之间
</span>
</div>
<div>
长度（浮点数）：
<input type="text" ng-model="length" name="length" smart-float/>
{{length}}<br/>
<span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span>
</div>
</form>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module("CustomValidation", []);
var INTEGER_REGEXP = /^\-?\d*$/;
app.directive("integer", function () {
return {
require:"ngModel",//NgModelController
link:function(scope,ele,attrs,ctrl) {
//View - >Model的更新
ctrl.$parsers.unshift(function (viewValue) {
//model -> view的更新吗??
//console.log(viewValue, ‘++‘);
if(INTEGER_REGEXP.test(viewValue)) {
ctrl.$setValidity("integer", true);
return viewValue;
}else {
ctrl.$setValidity("integer", false);
return undefined;
}
});
}
};
});
var FLOAT_REGEXP = /^\-?\d+(?:[.]\d+)?$/;
app.directive("smartFloat", function () {
return {
require:"ngModel",
link:function(scope,ele,attrs,ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if(FLOAT_REGEXP.test(viewValue)) {
ctrl.$setValidity("float", true);
return parseFloat(viewValue);
}else {
ctrl.$setValidity("float", false);
return undefined;
}
});
}
}
});
</script>
</body>
</html>
angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。
为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：
实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。
调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。
<!DOCTYPE HTML>
<html ng-app="CustomControl">
<head>
<meta charset="UTF-8">
<title>CustomControl</title>
<style type="text/css">
.ng-cloak {
display: none;
}
div[contenteditable] {
cursor: pointer;
background-color: #D0D0D0;
}
</style>
</head>
<body ng-controller="MyCtrl">
<div>
<div contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</div>
<pre>model = {{content}}</pre>
<button ng-click="reset()">reset model tirgger model to view($render)</button>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module("CustomControl", []);
app.controller("MyCtrl", function ($scope) {
$scope.reset = function() {
$scope.content = "My Little Dada";
};
});
app.directive("contenteditable", function () {
return {
require:"ngModel",
link:function (scope, ele, attrs, ctrl) {
//view -> model
ele.bind("blur keyup",function() {
scope.$apply(function() {
console.log("setViewValue");
ctrl.$setViewValue(ele.text());
});
});
//model -> view
ctrl.$render = function() {
//当根scope的model发生改变时 $render触发（00！）我这么认为
ele.html(scope.content);
};
//读取初始值
ctrl.$setViewValue(ele.text());
}
};
});
</script>
</body>
</html>
标签：style color io 使用 ar java for sp 数据
原文地址：http://my.oschina.net/felumanman/blog/330624
