IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]ng-messages 的$dirty 使用

    qcpm1983发表于 2015-02-11 17:15:09
    love 0

    用 ng-show 来显示错误信息的时候需要写很多的代码,找了一个插件 ng-messages。使用方法下:

    js 代码中加入依赖

    var myApp = angular.module('myApp', [
        "restangular",
        'ui.router',
        'ngMessages',
        ...
    

    html 中添加 js 文件

    <script src="bower_components/angular-messages/angular-messages.js">script>

    下面是一个注册页面的示例

    <div class="container" ng-controller="registerController">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                <div class="panel-heading">
                div>
                    <div class="panel-body">
                        <div role="form" class="form-horizontal">
                            <form name="register_form" novalidate >
                                <div class="form-group">
                                    <lable class="col-sm-2 control-label">Email:lable>
                                    <div class="col-sm-10">
                                        <input class="form-control"
                                        ng-model="userinfo.email"
                                        placeholder="请输入电子邮箱作为用户名" name="email" type="email" autofocus required minlength="6"  ng-maxlength="20"/ >
                                    div>
                                div>
    
                                <div ng-messages="register_form.email.$error" ng-if="register_form.email.$dirty" ng-messages-multiple ng-messages-include="pages/error.html">
                                div>
    
    
                                <div class="form-group">
                                    <lable class="col-sm-2 control-label">Password:lable>
                                    <div class="col-sm-10">
                                      <input class="form-control"
                                      ng-model="userinfo.password"
                                      placeholder="请输入密码" name="password" type="password" required ng-minlength="6" ng-maxlength="20"/>
                                    div>
                                div>
    
                                <div ng-messages="register_form.password.$error" ng-if="register_form.password.$dirty" ng-messages-multiple ng-messages-include="pages/error.html">
                                div>
    
                                <div class="form-group">
                                    <lable class="col-sm-2 control-label">lable>
                                    <div class="col-sm-10">
                                      <input class="form-control" placeholder="请再次输入密码" name="password-again" type="password"  required ng-minlength="6" ng-maxlength="20"/>
                                    div>
                                div>
    
                                <div ng-messages="register_form.password-again.$error" ng-if="register_form.password-again.$dirty" ng-messages-multiple ng-messages-include="pages/error.html">
                                div>
    
                                
                                <button class="btn btn-success col-sm-offset-2" ng-disabled="register-form.$invalid">注册button>
                            form>
                        div>
                    div>
    
                    <div class="panel-footer">
                        <div class="alert alert-error">
                            {{userinfo | json}}
                        div>
                    div>
                div>
            div>
        div>
    div>
    

    error.html

    
    <div class="col-sm-offset-2"><p class="text-danger" ng-message="required">* 此项为必填项p>div>
    <div class="col-sm-offset-2"><p class="text-danger" ng-message="minlength">* 最小6个字符 p>div>
    <div class="col-sm-offset-2"><p class="text-danger" ng-message="maxlength">* 最大20个字符 p>div>
    <div class="col-sm-offset-2"><p class="text-danger" ng-message="email">* 请输入 email 地址p>div>

    如果只是使用 ng-messages="register_form.email.$error 来判断是否使用 message 会直接显示出来,如果在后面加上 ng-if="register_form.email.$dirty" 就 ok 啦。

    给自己做个记录!



沪ICP备19023445号-2号
友情链接