AngularJs练习Demo5
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index5</title>
<script type="text/javascript" src="~/Scripts/angular.js"></script>
<style>
.red {
background: red;
color: blue;
} .yellow {
background: yellow;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<div ng-class="{red:s,yellow:true}" ng-cloak>{{text}}</div>
<div ng-class="{sClass}" ng-cloak>{{text}}</div>
<div ng-cloak ng-style="{color:'red'}"></div>
<div ng-cloak ng-style="{sStyle}"></div>
<a href="{{url}}">百度</a><br />
<a ng-href="{{url}}"></a><br />
<img src="{{src}}" /><br />
<img ng-src="{{src}}" /><br />
<a ng-href="{{url}}" title="百度" ng-attr-title="{{text}}"></a> <div ng-show="t">ng-show绑定变量不需要{{}}用的是display的操作</div> <div ng-if="t">ng-if是dom级的操作直接删除dom</div> <div ng-switch on="t">
<p ng-switch-default>默认效果</p>
<p ng-switch-when="false">切换的效果
</p>
<p ng-switch-when="true">
切换的效果
</p>
</div>
<div ng-switch on="selection">
<div ng-switch-when="settings">Settings Div</div>
<div ng-switch-when="home">Home Span</div>
<div ng-switch-default>Default</div>
</div>
<input type="checkbox" ng-model="open"/>
<details id="details" ng-open="open">
<summary>Show/Hide me</summary>
</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.sStyle = "{color:'red',background:'yellow'}";
$scope.url = 'htttp://www.baidu.com';
$scope.src = "";
$scope.t = true;
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
});
</script>
</body>
</html>
AngularJs练习Demo5的更多相关文章
- angularJS学习笔记二
angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...
- AngularJS的简单入门
AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- AngularJS+ThinkPHP实例教程
总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
- 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查
品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人 ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- AngularJS入门Demo
1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
随机推荐
- cocos2dx SpriteBatchNode 精灵的渲染优化类
用处是减少对精灵的渲染次数,用法如下 SpriteFrameCache::getInstance()->addSpriteFramesWithFile("person.plist&qu ...
- C/C++语言中const的用法
1. const 在C和C++中的区别 C++中的const正常情况下是看成编译期的常量,编译器并不为const分配空间,只是在编译的时候将期值保存在名字表中,并在适当的时候折合在代码中. 所 ...
- css3中的提供的元素变化属性
通过 CSS3 提供的2d元素转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. css3中为我们 提供了: translate() rotate() scale() skew() matrix( ...
- [Mugeda HTML5技术教程之10]发布内容
动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...
- php测试题整理(0519)
1.B/S架构和C/S架构: B/S架构是依托于浏览器的网络系统,C/S架构是基于客户端的. B/S架构: 随着Internet和WWW的流行,以往的主机/终端和C/S都无法满足当前的全球网络开放.互 ...
- 求Sn=1!+2!+3!+4!+5!+…+n!之值,其中n是一个数字
#include <iostream> using namespace std; int main() {long long s,n,i,j,p;s=0; cin>>n; ...
- 树莓派 (Raspberry Pi) 是什么?普通人怎么玩?(私有云NAS也会有;上传到百度盘的功能nas也有)
作者:王震宇链接:https://www.zhihu.com/question/20859055/answer/54734499来源:知乎著作权归作者所有,转载请联系作者获得授权. 我两年前买的(约2 ...
- 只允许指定的ip访问本机的指定端口22:
只允许指定的ip访问本机的指定端口22: 允许的的ip:192.168.1.123, 192.168.1.124, 192.168.1.100,其他ip都禁止访问. 切换到root用户 1.在tcp协 ...
- bzoj1143
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1143 首先用传递闭包,知道一个点是否可以到达另一个点,即mp[i][j]==1表示i可以到j: ...
- Go语言的构建方法总结
趁着近期要换工作的空闲时间,看了一下Go语言,与C++相比,Go语言的确在不少地方轻便了不少,例如:增加了内置的字符串类型.多个返回值.支持协程.简单的构建方法等等.使得在生产效率方面有了不少的提高. ...