<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://www.jb51.net/js/angular.js" type="text/javascript" charset="utf-8"></script> <title>表单验证</title> <style type="text/css"> .deleted { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; } .error { color: red; background-color: yellow; } .base-class { transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } .base-class.my-class { color: red; font-size:3em; } </style> </head> <body ng-app="myApp" > <div ng-controller="myCtrl"> <form> <p ng-class="{deleted: deleted, bold: bold, 'error': error}">Map Syntax Example</p> <label><input type="checkbox" ng-model="deleted">deleted (apply "deleted" class)</label><br> <label><input type="checkbox" ng-model="bold">bold (apply "bold" class)</label><br> <label><input type="checkbox" ng-model="error">error (apply "error" class)</label> <hr> <input type="button" value="set" ng-click="myVar='my-class'"> <input type="button" value="clear" ng-click="myVar=''"> <br> <span ng-class="myVar">Sample Text</span> </form> </div> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ }); </script> </body> </html><strong> </strong>
8、ng-if实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://www.jb51.net/js/angular.js" type="text/javascript" charset="utf-8"></script> <title>表单验证</title> <style> .animate-if { width:400px; border:2px solid yellowgreen; border-radius: 10px; padding:10px; display: block; } </style> </head> <body ng-app="myApp" > <div ng-controller="myCtrl"> <form> <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/> Show when checked: <span ng-if="checked"> This is removed when the checkbox is unchecked. </span> </form> </div> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ }); </script> </body> </html>
