@{

    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的更多相关文章

  1. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  2. AngularJS的简单入门

    AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  3. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  4. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  5. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

  6. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  7. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  8. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  9. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

随机推荐

  1. The type or namespace name 'Script' does not exist in the namespace 'System.Web' (are you missing an assembly reference?)

    应该说是 .net4 的bug,没有所谓的 System.Web.Extensions.dll 库文件,需要将项目的 Target Framework修改为 3.5版本,才能加载System.Web. ...

  2. 提升PHP速度的53个建议

      1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row[’id’] 的速度是$row[id]的7倍. 3.echo 比 print 快,并且使用e ...

  3. powerdesigner设置mysql唯一键，非主键

    员工表如下,先将id设置主键: 现在将"员工id"设置唯一约束: 1,切换到"Keys",发现已经存在一个Key1,这个是刚刚新增主键id.在Key1下发空行出 ...

  4. js获取鼠标选中的文字

    1.获取选中的文字: document.selection.createRange().text; IE9以下使用 window.getSelection().toString(); 其他浏览器使用 ...

  5. C语言写猜拳游戏中遇到的函数循环小问题

    各位可能在初学C语言的时候都有写过猜拳游戏.但在写猜拳的函数时,避免不了会使用循环. 当函数被套在一个循环中的时候,你的计分变量可能就会被重置为函数体里的初始值.那么怎么解决这个问题? 其实很简单,你 ...

  6. Eclipse formater(google Java 编码规范)

    1. 谷歌Java编码规范 http://google-styleguide.googlecode.com/svn/trunk/javaguide.html 2. 下载配置文件: https://co ...

  7. 通过select选项动态异步加载内容

    通过监听select的change事件来异步加载数据. 1:效果图: 选择Good: 选择 Bad: 2:index.html <!DOCTYPE html> <html lang= ...

  8. 拍照-----------android系统 至关重要的功能

    一 在Android 中,拍照对应的Action 是android.provider.MediaStore.ACTION_IMAGE_CAPTURE. 用于拍照的Activity 需要返回照片图像数据 ...

  9. documentElement vs body区别

    documentElement.scrollTop------>0因为,他包含head, body body.scrollTop------------------>才是正确的 scrol ...

  10. cf C. Levko and Array Recovery

    http://codeforces.com/contest/361/problem/C 这道题倒着一次,然后正着一次,在正着的一次的时候判断合不合法就可以. #include <cstdio&g ...