Angular学习（7）- 模板
示例：
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Study 7</title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
<div ng-controller="testController">
<h1>{{model.newTitle}}</h1>
Name:<input type="text" ng-model="model.name" />
Fraction:<input type="text" ng-model="model.fraction" fraction-num />
Type:<select ng-model="model.type"><option value="1" selected>Radio</option><option value="2">CheckBox</option></select>
<input type="button" ng-click="add(model.fraction)" value="Add" />
<ul>
<li ng-repeat="item in model.options">
<b>{{$index+1}}</b>
<input type="text" ng-model="item.content" value="item.content" fraction-num />
<a href="javascript:void(0)" ng-click="del($index)">Delete</a>
</li>
</ul>
<hr />
<div>
<h1>{{model.previewTitle}}</h1>
<b>[{{model.type | typeFilter}}]{{model.name}}</b>({{model.fraction}})
<ul>
<li ng-repeat="item in model.options">
<b>{{$index + 1}}</b>
<input type="radio" name="optcheck" ng-show="model.type==1" />
<input type="checkbox" ng-show="model.type==2" />
{{item.content}}
</li>
</ul>
</div>
<hr />
{{nowTime | date : "yyyy-MM-dd HH:mm:ss"}}
模板:<a href="javascript:void(0);" ng-repeat="t in templates">{{t}} </a><br />
</div>
<script type="text/javascript">
var app = angular.module("MyApp", [], function() { });
var myModel = {
newTitle: "Title",
previewTitle: "Preview Title",
name: "Robin",
fraction: "100",
type : 1,
options: []
};
app.controller("testController", function($scope, tpls) {
$scope.model = myModel;
$scope.add = function(text) {
var obj = { content: text };
$scope.model.options.push(obj);
};
$scope.del = function(index) {
$scope.model.options.splice(index, 1);
};
$scope.nowTime = new Date();
$scope.templates = tpls;
});
app.filter("typeFilter", function() {
var func = function(value) {
return value == 1 ? "Single Select" : "Multi Select";
};
return func;
});
app.directive("fractionNum", function() {
return {
link: function(scope, elements, attrs, controller) {
elements[0].onkeyup = function() {
if (/\D/.test(this.value)) {
this.style.borderColor = 'red';
}
else {
this.style.borderColor = '';
}
};
}
};
});
app.factory('tpls', function() {
return ['tpl1', 'tpl2', 'tpl3', 'tpl4'];
});
</script>
</body>
</html>
Angular学习（7）- 模板的更多相关文章
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- Angular 学习思路
近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...
- Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
- angular学习资源
angular学习资源 angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs ...
- angular学习-入门基础
angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...
- angular学习—组件
组件: vue组件:xxx.vue react组件:xxx.js+xxx.css angular组件:xxx.ts+xxx.css+xxx.html angular的装饰器: @ngModule:an ...
- angular学习一框架结构认识
angular学习所有内容均会与vue以及react框架进行对比. angular学习使用的编译器:webstorm 解决编译器屏蔽node_modules包问题: File-->setting ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
随机推荐
- NLP（Natural Language Processing）
https://github.com/kjw0612/awesome-rnn#natural-language-processing 通常有: (1)Object Recognition (2)Vis ...
- buildroot httpd php
/******************************************************************** * buildroot httpd php * 说明: * ...
- hihoCoder #1246 : 王胖浩与环 （数学）
题意: 有一个环形序列,可以将其切成连续的k段子序列,那么gcd( 每段子序列的和 )就是优美程度.输出n个整数,表示当k=[1, n] 时的最大优美程度. 思路: 观察一下,当切成1段的时候,gcd ...
- python+webdriver ppt
一:selenium webdriver的介绍 1.来源,优点,局限性 2.和其他自动化工具对比 3.工作原理 4.组成部分 二:webdriver的api介绍 1.driver 2.元素定位(id, ...
- USB协议-USB的包结构及包的分类
USB是串行总线,所以数据是一位一位地在数据线上传送的.既然是一位一位地传送,就存在着一个数据位先后的问题.USB使用的是LSB在前的方式,即先出来的是最低位数据,接下来是次低位,最后是最高位(MSB ...
- 二 J2EE 概述
一 WEB 应用 1. WEB 应用工作方式:B/S 模式 (浏览器/服务器模式) 2. WEB 应用结构组成: a. WEB 服务器:是安装在 WEB 服务器计算机上的一个软件包,负责接收用户请求并 ...
- 廖雪峰老师的git在线教程
我是看廖老师的网站,学习git使用的,所以在这里做做收藏,也推广推广. 该教程的类型可以换个名称<手把手看图教你用git>来概括,呵呵. 做得很用心,学起来很快.
- Linux（Ubuntu 13)下安装Eclipse
1.本机配置及软件情况: Ubuntu版本:Ubuntukylin-13.10-desktop-i386(32位) JDK:jdk1.7.0_15(jdk-7u15-i856.gz) eclipse: ...
- POJ 1860 Currency Exchange （最短路）
Currency Exchange Time Limit : 2000/1000ms (Java/Other) Memory Limit : 60000/30000K (Java/Other) T ...
- C++ Primer : 第九章 : 顺序容器的操作以及迭代器失效问题
顺序容器的添加.访问.删除操作以及forward_list的特殊操作,还有迭代器失效问题. 一.向容器添加元素 // array不支持这些操作 // forward_list有自己撰于的版本的inse ...