• AngularJs(Part 9)--AngularJS 表单


    AngularJS 表单
        AngularJS使用了MVX的结构,我们可以是传统的表单更加强大。比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入,
    现在这些工作全部可以交给AngularJS. 我们唯一要关心的就是model中的值。
    在AngularJS中 ,form和input其实也是directive。(是不是很奇怪!) 这两个家伙就是传统form的加强版。
        使用input标签
        ng-model input专用directive,双向绑定,配合其他功能提供输入验证和转换功能。
        required 表示不能为空;ng-minlength 表示最小长度; ng-maxlength 表示最大长度;ng-pattern="/^[a-zA-Z]*$/" 表示必须符合的正则.
        现有如下代码:
            <input ng-model="user.name" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^[a-zA-Z]*$/" />
        如果输入"ab",那么user.name中其实是空的,因为ng-minlength验证没通过。同理如果ng-maxlength、ng-pattern没有通过,user.name
    中都是空值。所以我们可以直接拿来用user.name而不必担心中会有invalid的值。

    使用checkbox
        checkbox有true和false两个值。 当然,如果加了ng-true-value和ng-false-value两个directive,可以改变默认的值。
        如下,如果选中该checkbox,user.admin的值会是"admin",没选中会是"normal"
        <input type="checkbox" ng-model="user.admin" ng-true-value="admin" ng-false-value="normal"/>

    使用radio
        没什么好说的,如下代码:
        <input type="radio" ng-model="user.sex" value="male"/>
        <input type="radio" ng-model="user.sex" value="female"/>
        
    使用select
        简单用法:
        <select ng-model="user.sex">
                <option style="display:none" value=""></option> //如果不加这一行,那么会出现三个选项,第一项为空
                <option value="m">Male</option>
                <option value="f">Female</option>
        </select>
        复杂用法:
        首先 $scope.users=[{name:'Mike',email:'mike@qq.com'},{name:'jack',emial:'jack@163.com'}]
        然后:<select ng-options="u.email as u.name for u in users">
                <option style="display:none" value=""></option>
              </select>
        意思是在select中显示的是每个user的name,但是选中后的值却是每个user的email

    深入了解ngModel
        每一个ngModel都会新建一个ngModelController的对象。该对象可以访问该input上的其他directive。
        ngModel是双向绑定的,相应的ngModelController中有两个数组:$formatters 和$parsers。$formatters 用来把model中的值
        转换为显示在view上的值;$parsers则相反。
        每一个form都对应一个ngFormController对象。ngModelController作为ngFormController对象的属性。
        假设有如下代码:
        <form name='form1'>
            <input name='input1' type='email' required/>
        </form>
        那么 $scope.form1就是ngFormController对象;$scope.form1.input1就是ngModelController的对象。
        那么通过$scope.form1.$valid就可以知道这个form有没有通过验证;$scope.form1.input1.$valid就可以知道这个input有没有通过验证。
        但是这个input上其实有两个验证:一个是type='email';一个是 required。怎么知道那个验证有没有通过? 可以使用
        $scope.form1.input1.$error['required'] 和$scope.form1.input1.$error['email']这两个布尔值知道。

  • 相关阅读:
    大数据Hadoop第二周——配置新的节点DataNode及ip地址
    vue环境搭建详细步骤
    苹果电脑Mac系统如何下载安装谷歌Chrome浏览器
    点云的基本特征和描述
    ModuleNotFoundError: No module named 'rospkg'
    ROS的多传感器时间同步机制Time Synchronizer
    Spring Cloud 2020 版本重大变革,更好的命名方式!
    Spring MVC 接收请求参数所有方式总结!
    阿里为什么不用 Zookeeper 做服务发现?
    微服务之间最佳调用方式是什么?
  • 原文地址:https://www.cnblogs.com/formyjava/p/4166307.html
Copyright © 2020-2023  润新知