AngularJS的一些基本样式初窥
内容摘要
显示和隐藏
在 Angular 中的一切,都是基于模型的改变,进而通过标识符反映这些变化到界面上。
ng-show 和 ng-hide 可以做相同的事情。显示和隐藏是基于你传递给他们的表达式
在 Angular 中的一切,都是基于模型的改变,进而通过标识符反映这些变化到界面上。
ng-show 和 ng-hide 可以做相同的事情。显示和隐藏是基于你传递给他们的表达式
文章正文
显示和隐藏
在 Angular 中的一切,都是基于模型的改变,进而通过标识符反映这些变化到界面上。
ng-show 和 ng-hide 可以做相同的事情。显示和隐藏是基于你传递给他们的表达式而定,即,当表达式为 true 时,ng-show 就显示,反之隐藏。当表达式为 true 时,ng-hide 就隐藏,反之显示。这些标识符是通过设置元素的样式 display:block 显示和 display:none 隐藏进行工作的。
CSS类和样式
通过 {{}} 解析来进行数据绑定,从而能够动态地设置类和样式。
ng-class 和 ng-style
在大型项目中,上面的方式会使得难以管理,以至于不得不同时阅读模版和 JavaScript 才能正确地创建 css 。
Angular 提供了 ng-class 和 ng-style 标识符。他们每一个都需要一个表达式。表达式执行的结果可能是下列之一:
- 一个字符串,表示空间隔开的类名。
- 一个类名数组
- 一个类名到布尔值的映射
选中的行
模版中,我们设置 ng-class 的值为 {selected:$index==selectedRow},当模型调用selectedRow 时将匹配 ng-repeat 的 $index,进而显示选中的样式。同样我们设置 ng-click 来通知控制器用户点了哪一行。
src 和 href 建议
建议使用 ng-src 和 ng-href。
1 2 | <img ng-src= "/img/01.png" > <a ng-href= "www.segmentfault.com" >segmentfault</a> |
所有源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>angular demo</title> <script src= "http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js" ></script> </head> <body> <div id= "App1" ng-app= "shoppingCart" ng-controller= "ShoppingCartController" > <h1>Your demo</h1> <!-- demo 1 --> <div ng-show= 'menuState.show' >another another another</div> <button ng-click= "test2()" >切换</button> <hr><!-- demo 2 --> <style type= "text/css" > .menu-disabled-true{ opacity:1; color: red; -webkit-transition:all 1000ms linear; -moz-transition:all 1000ms linear; -o-transition:all 1000ms linear; } .menu-disabled-false{ opacity: 0; -webkit-transition:all 1000ms linear; -moz-transition:all 1000ms linear; -o-transition:all 1000ms linear; } </style> <div class = "menu-disabled-{{isDisabled}}" >adfadfadasda</div> <button ng-click= "test()" >隐藏</button> <button ng-click= "test1()" >显示</button> <button ng-click= "test11()" >切换</button> <hr><!-- demo 3 --> <style type= "text/css" > .error { background-color: red; } .warning { background-color: yellow; } </style> <div ng- class = '{error:isError, warning:isWarning}' >{{messageText}}</div> <button ng-click= "showError()" >error</button> <button ng-click= "showWarning()" >warning</button> <hr><!-- demo 4 --> <style type= "text/css" > .selected{ background-color: lightgreen; } </style> <div ng-repeat= "item in items" ng- class = '{selected:$index==selectedRow}' ng-click= 'selectedWhich($index)' > <span>{{item.product_name}}</span> <span>{{item.price | currency}}</span> </div> </div> <script> var shoppingCartModule = angular.module( "shoppingCart" , []) shoppingCartModule.controller( "ShoppingCartController" , function ( $scope ) { // demo 1 $scope .menuState = { 'show' :true}; $scope .test2 = function () { $scope .menuState.show = ! $scope .menuState.show; }; // demo 2 $scope .isDisabled = true; $scope .test = function () { $scope .isDisabled = 'false' ; }; $scope .test1 = function () { $scope .isDisabled = 'true' ; }; $scope .test11 = function () { $scope .isDisabled = ! $scope .isDisabled; }; // demo 3 $scope .isError = false; $scope .isWarning = false; $scope .messageText = 'default, default' ; $scope .showError = function () { $scope .messageText = 'This is an error' ; $scope .isError = true; $scope .isWarning = false; }; $scope .showWarning = function () { $scope .messageText = 'Just a warning, donot warry' ; $scope .isWarning = true; $scope .isError = false; }; // demo 4 $scope .items = [ { product_name: "Product 1" , price: 50 }, { product_name: "Product 2" , price: 20 }, { product_name: "Product 3" , price: 180 } ]; $scope .selectedWhich = function (row) { $scope .selectedRow = row; } } ); </script> </body> </html> |
代码注释