首页 > 代码库 > form 表单

form 表单

2024-07-17 13:52:25   227人阅读

angular 提供了表单指令，它和ng-model会有很密切的互动。

我们先来了解一下基本的ng-model

 

ng-model 通常放在input上，用来同步elem & scope 的数据

ng-model 在不同的element上会有不同的同步模式，这些angular已经帮我封装了许多 . 

 

ng-model这个指令也提供了一些扩张接口 ，这个指令的controller 名为 ngModel 

如果我们想在数据同步间做一些拦截，我们可以添加一个自定义指令来实现 

    <div ng-app="myApp">        <div ng-controller="ctrl">            <input type="text" ng-model="name" test />        </div>    </div>         angular.module("myApp", []).            directive("test", [function () {                return {                    restrict: "A",                    link: function ($scope, $element, $attrs, ctrls) {                        ctrls.$formatters.unshift(function (value) {                            console.log(value);                            return value + "123";                        });                        ctrls.$formatters.unshift(function (value) {                            console.log(value);                            return value + "456";                        });                        ctrls.$parsers.push(function (value) {                            console.log(value);                            return value;                        });                    },                    require : "ngModel"                }            }]).            controller("ctrl", ["$scope", function ($scope) {                $scope.name = "keatkeat";            }]);

通过require 引入 ng-model的controller到link中 , 调用 ctrl.$formatter 是个List<Fn> ，model 在同步数据时会逐一逆序(我也不知道为什么是逆序)调用里面的方法来处理value最终同步进input, (scope -> element) , 因为逆序所以我们放入时用了unshift 

ctrl.$parsers 则相反 (element -> scope) 

 

此外 ng-model 还有一些基本 option 可以调 

<input type="text" name="userName"           ng-model="user.name"           ng-model-options="{ updateOn: ‘blur‘, debounce: 1000 ,getterSetter: true  }"/><br />
<pre>user.name = <span ng-bind="user.name()"></span></pre>

updateOn 写入一个事件名来表示我们希望什么事件促使这个elem被更新，比如 blur / keyup 等 

debounce 是deley update 毫秒, 一般我们不希望用户联系每一次keydown时都更新，而是等到用户停止输入时才执行一次更新。就可以放一个delay 实现了 

getterSetter = true 可以用在依赖属性上，比如我们的$scope.name = function (){ retrun xx; } 当name是个方法的时候

 


联系
我们