angularjs-更改样式ng-class,ng-style
发布时间:2020-12-17 08:59:21 所属栏目:安全 来源:网络整理
导读:#ng-class和ng-style!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/titlescripttype="text/javascript"src='js/angular.min.js'/scriptstyletype="text/css".ng-cloak{display:none;}.red{background:red;}.yellow{background:yellow;}/style/headbodyng-ap
#ng-class和ng-style <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"src='js/angular.min.js'></script> <styletype="text/css"> .ng-cloak{display:none;} .red{background:red;} .yellow{background:yellow;} </style> </head> <bodyng-app="hd"ng-cloakclass="ng-cloak"> <divng-controller="ctrl"> <table> <tr> <td><inputtype="checkbox"ng-checked="status"ng-model="status"/>{{status}}</td> <td>{{status?"取消":"全选"}}</td> </tr> <trng-repeat="vindata"> <td><inputtype="checkbox"ng-checked="status"/>{{status}}</td> <!--ng-class样式根据数据动态变化--> <!--ng-style自定义样式--> <td><divng-class="status?'red':'yellow'"ng-style="{fontSize:size+'px'}">{{v}}</div></td> </tr> </table> 文字大小:<inputtype="text"ng-model="size"/> </div> <scripttype="text/javascript"> varm=angular.module('hd',[]) m.controller('ctrl',['$scope',function($scope){ $scope.status=true $scope.data=['game','coding','card'] }]) </script> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 我怎样才能在bash中正确地逃避这个正则表达式?
- scala – sbt 0.12.4 – 有x特征警告;重新运行-feature以获
- 使用 BootstrapTable 实现数据的分页显示(二)
- typescript – Angular2组件加载外部js lib文件
- .net下webservice包装类
- WebService大讲堂之Axis2(10):使用soapmonitor模块监视soa
- 可编辑ComboBox使用引导/ angularjs
- [Angularjs]ng-switch用法
- 【shell】Linux shell 之 判断用户输入的变量是否为数字
- bash – 从不同文件中grep多行,并将它们打印到xml