• angular 初学(二)ng-class ng-disabled


    1、ng-class:为该标签添加class名,为此可以设置css样式,比如:

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <title>form</title>
     6     <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
     7     <style>
     8         input {margin-bottom:10px;300px;height:30px;border:1px solid #ccc;border-radius:5px;padding:2px;}
     9         lable{color:#555;font-size:14px;font-family:'Microsoft YaHei'}
    10         .error{border:1px solid #ff0000}
    11     </style>
    12 </head>
    13 
    14 <body ng-controller="maincontrol">
    15     <form name="signupForm" ng-submit="sub()">
    16         <div class="form">
    17             <lable>用户名:</lable>
    18             <input type="text" ng-model="input" name="username"
    19                    ng-class="{'error':signupForm.username.$invalid &&signupForm.username.$touched}" ng-minlength="4" required />
    20         </div>
    21     </form>
    22 </body>
    23 <script>
    24     angular.module('myApp', [])
    25     .controller('maincontrol', function ($scope) {
    26         $scope.sub = function () {
    27             console.log('表单提交成功!');
    28         }
    29 
    30     })
    31 </script>
    signupForm.username.$invalid:表示输入不合法,
    signupForm.username.$touched:表示只有在用户输入后,触摸后才会有此样式,但是现在的问题是,这个效果没有实现。究竟是为什么?
    angularjs的版本问题,稳定的https://code.angularjs.org/1.3.16/angular.min.js这个版本就可以 咯

    2、ng-disabled:表示符合一定条件后禁用状态,比如:
    1  <button type="submit" ng-disabled="signupForm.username.$invalid">提交</button>

     当用户输入名不合法是禁用,或者说只有当用户名合法,这个提交按钮才能正常使用。

  • 相关阅读:
    使用JMeter进行RESTful API测试
    DVWA reCAPTCHA key: Missing
    SQL注入之DVWA平台测试mysql注入
    DVWA之SQL注入演练(low)
    浅谈CSRF攻击方式
    WAMPSERVER-服务器离线无法切换到在线状态问题的解决
    SQL注入攻击和防御
    WebScarab安装
    Intellij idea 自动完成的变量名称首字母变为小写
    在IDEA中代码自动提示第一个字母大小写必须匹配的解决
  • 原文地址:https://www.cnblogs.com/xu-blog/p/6706874.html
Copyright © 2020-2023  润新知