首页 > 代码库 > angular 初学（二）ng-class

angular 初学（二）ng-class

2024-09-14 17:19:47   215人阅读

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这个版本就可以 咯

angular 初学（二）ng-class


联系
我们