angularjs1-5，class，

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="angular.min.js"></script><style>.red{ background:red; color:blue;}.yellow{ background:yellow;}</style></head><body><div ng-app="myApp"><div ng-controller="firstController"><div ng-cloak  ng-class="{red:s}">{{text}}</div><div ng-cloak  ng-class="{{sClass}}">{{text}}</div><div ng-cloak  ng-style="{color:'red'}">{{text}}</div><div ng-cloak  ng-style="{{style}}">{{text}}</div><a href="{{url}}">百度1</a><a ng-href="{{url}}">百度</a><img src="{{src}}" /><img ng-src="{{src}}" /><br><br><a ng-href="{{url}}" ng-attr-title="{{text}}">百度</a><br><br><div ng-show="s">你好</div> //dispaly显示隐藏<br><br><div ng-if="s">你好</div> //dom的移除和没有移除<div ng-switch on="s"><p ng-switch-default>默认的效果</p><p ng-switch-when="false">false切换的效果</p><p ng-switch-when="true">true切换的效果</p></div><br><br><div class="animate-switch-container"ng-switch on="selection"><div class="animate-switch" ng-switch-when="settings">Settings Div</div><div class="animate-switch" ng-switch-when="home">Home Span</div><div class="animate-switch" ng-switch-default>default</div></div><input type="checkbox" ng-model="open"><br/><details id="details" ng-open="open"><summary>Copyright 2011.</summary><p>All pages and graphics on this web site are the property of W3School.</p></details></div></div><script type="text/javascript">var app = angular.module("myApp", []);app.controller('firstController',function($scope){$scope.text='phonegap中文网';$scope.s=true;$scope.sClass = "{red:true,yellow:true}";$scope.style = "{color:'red',background:'yellow'}";$scope.url='http://www.baidu.com';$scope.src='http://www.baidu.com/img/bdlogo.png';
//              $scope.style = "{color:'red',background:'yellow'}";
//              $scope.sClass = "{red:true,yellow:true}";
//              $scope.url = "http://www.baidu.com";
              $scope.items = ['settings', 'home', 'other'];$scope.selection = $scope.items[0];});</script></body>
</html>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script></head><body><div ng-app="myApp"><div ng-controller="firstController"><div ng-click="run()">点击</div><div ng-bind="text"></div>//绑定多个<div ng-bind-template="{{text}} {{name}}"></div>//1.引入angular-sanitize，2.依赖['ngSanitize']<div ng-bind-html="text2"></div></div></div><script type="text/javascript">var app = angular.module("myApp", ['ngSanitize']);app.controller('firstController',function($scope){$scope.text='phonegap中文网';$scope.name='中文网';$scope.text2='<h2>这是h2</h2>';$scope.run=function(){alert('run');console.log('run');}});</script></body>
</html>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="../angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script></head><body><div ng-app="myApp"><div ng-controller="firstController"><div ng-repeat="innerList in list" ng-init="outerIndex = $index"><div ng-repeat="value in innerList" ng-init="innerIndex = $index"><span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span></div></div><input type="text" ng-model="name" ng-model-options="{ updateOn: 'blur' }" />{{name}}</div></div><script type="text/javascript">var app = angular.module("myApp", ['ngSanitize']);app.controller('firstController',function($scope){$scope.list = [['a', 'b'], ['c', 'd']];});</script></body>
</html>

转载于:https://www.cnblogs.com/yaowen/p/7225388.html

angularjs1-5，class，相关推荐

springboot中接口实例化_AngularJs中控制器的定义，实例化，作用域范围
AngularJs中控制器的定义,实例化,作用域范围基于AngularJS入门与进阶(江荣波著)这本书的笔记 AngularJS 1.x的demo AngularJS1.x和Angular2,4, ...
Mysql，SqlServer，Oracle主键自动增长的设置
Mysql,SqlServer,Oracle主键自动增长的设置参考文献 http://blog.csdn.net/andyelvis/article/details/2446865 1.把主键定义为 ...
linux启动，重启，停止 jar，.sh脚本
linux启动,重启,停止 jar,.sh脚本 #配置jar名称 APP_NAME=receiver.jar#使用说明,用来提示输入参数 usage() { echo "Usage: sh ...
堆栈，数据，文本，heap，bss，text data，stack
堆栈,数据,文本,heap,bss,text data,stack text data bss stack heap 段根据APUE,程序分为下面的段:.text, data (initialize ...
TVM示例展示 README.md，Makefile，CMakeLists.txt
TVM示例展示 README.md,Makefile,CMakeLists.txt TVM/README.md Open Deep Learning Compiler Stack Documentat ...
TVM，Relay，Pass
TVM,Relay,Pass Relay介绍主要结合TVM的文档(https://tvm.apache.org/docs/dev/relay_intro.html),介绍一下NNVM的第二代Rela ...
LED芯片，应用品，蓝宝石衬底，集成电路，UV
LED芯片,应用品,蓝宝石衬底,集成电路,UV 三安主要从事全色系超高亮度LED芯片的研发,生产与销售,产品性能稳定,品质优异. 产品覆盖三安能够提供全波长范围的LED,产品可覆盖全部可见光和不可见 ...
CPU，GPU，Memory调度
CPU,GPU,Memory调度 HDD&Memory&CPU调度机制(I/O硬件性能瓶颈) 图1. HDD&Memory&CPU调度图 CPU主要就是三部分:计算单元 ...
自动驾驶QNX，Linux，Autosar概述
自动驾驶QNX,Linux,Autosar概述 QNX是一个分布式.嵌入式.可规模扩展的实时操作系统.遵循POSIX.1 (程序接口)和POSIX.2 (Shell和工具).部分遵循POSIX.1b( ...
i.MX6UL: i.MX 6UltraLite处理器 - 低功耗，安全，Arm® Cortex®-A7内核
i.MX6UL: i.MX 6UltraLite处理器 - 低功耗,安全,Arm® Cortex®-A7内核概述 i. MX6UltraLite作为i.MX6系列的扩展,一系列高性能.超高效的处理器 ...

angularjs1-5，class，

angularjs1-5，class，相关推荐

最新文章

热门文章