AngularJs练习Demo6
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index6</title>
<script type="text/javascript" src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<div ng-bind="text">ng-bind只能绑定一个</div>
<div ng-bind-template="{{text}}{{name}}">ng-bind-template可以绑定多个</div>
<div ng-bind-html="h2">ng-bind-html 依赖sanitize插件依赖ngSanitize也可以通过使用$sce服务</div>
<div ng-bind-html="detailContent()"></div>
<div ng-repeat="innerList in list" ng-init="outerIndex=$index">
<div ng-repeat="value in innerList" ng-init="innerIndex=$index">
<span>list[{{outerIndex}}][[{{innerIndex}}]]={{value}}; </span>
</div>
</div>
<div>
<input type="text" ng-model="name" ng-model-options="{updateOn:'blur'}" />
{{name}}
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", ['ngSanitize']);
app.controller("firstController", function ($scope,$sce) {
$scope.text = "PhoneGap中文网";
$scope.name = "张三";
$scope.h2 = "<h2>这是H2</h2>";
$scope.detailContent = function () {
return $sce.trustAsHtml("<H1>使用ng的$sce来解析HTML</H1>");//记得写return
};
$scope.list = [['a','b'],['c','d']];
});
</script>
</body>
</html>
AngularJs练习Demo6的更多相关文章
- 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 ...
随机推荐
- 深入理解REST与Servlet架构的区别
本身这个比较是个伪命题,因为 RESTful Service是一个软件架构“风格”, 而servlet是java 服务端的一种技术 之所以把它们拿出来比较,是由于它们代表了两个时代的技术风格与架构.下 ...
- 【Oracle】-【权限-ORA-04043】- ORA-04043: object "SYS"."V_$DATABASE" does not exist
用非dba账号(但赋予了DBA角色)登录一个新的10g数据库想看下版本号, SQL> desc v$instance; ERROR: ORA-04043: object "SYS&qu ...
- 兼容IE的渐变
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=, startColorstr=#1471da, endColorstr ...
- Flask Jinjia2 与 react
Jinjia2 这是flask使用的模板工具,利用render_template方法可以方便的将后端的数据传给前端. 但是如果要使用react呢. 我如果在jsx中直接使用{{}}是不能输出变量的. ...
- 这样就算会了PHP么？-3
关于循环,IF,WHILE.... <?php $month = date("n"); $today = date("j"); if ($today &g ...
- 绝美Sysinternals
啥也不说了,自己看吧: https://technet.microsoft.com/en-us/sysinternals/bb545046 新地址: https://technet.microsoft ...
- IComparer<T> 接口Linq比较接口
IComparer<T>比较两个对象并返回一个值,指示一个对象是小于.等于还是大于另一个对象. 在Linq当中,很多扩展方法接受一个实现IComparer<T>接口的实例的对象 ...
- WPF中的换行符
原文:WPF中的换行符 WPF中UI上和后台代码中的换行符不同. 其中: XAML中为 C#代码中为 \r\n 或者: Environment.NewLine 版权声明:本文为博主原创文章,未经博主允 ...
- js深入研究之Person类案例
<script type="text/javascript"> /* 定义一个Person类 */ function Person(name, age) { this. ...
- sphinx全文检索之PHP使用教程
以上一篇的email数据表为例: 数据结构: 01.CREATE TABLE email ( 02.emailid mediumint(8) unsigned NOT NULL auto_increm ...