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;width: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>

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

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did222765

更新时间：2023-05-07 阅读：36次