Angular学习(5)- 数组双向梆定+filter
示例:
<!DOCTYPE html> <html ng-app="MyApp"> <head><title>Study 5</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" />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" /><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"}}</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) {$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();});app.filter("typeFilter", function() {var func = function(value) {return value == 1 ? "Single Select" : "Multi Select";};return func;});</script> </body> </html>
转载于:https://www.cnblogs.com/HD/p/3630729.html
Angular学习(5)- 数组双向梆定+filter相关推荐
- Angular学习(6)- 数组双向梆定+filter+directive
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head><title>Study 6< ...
- Angular学习(4)- 数组双向梆定
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head><title>Study 4< ...
- Angular学习(3)- 双向梆定
示例代码: <!DOCTYPE html> <html ng-app="MyApp"> <head><title>Study 3&l ...
- 【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 文章目录 使用效果: 参数说明: 方法原理解析: 使用效果: ...
- Angular学习教程-英雄之旅
Angular学习教程-英雄之旅 官网链接 https://angular.cn/tutorial 文章目录 Angular学习教程-英雄之旅 一.能学习到 二.创建项目 三.英雄编辑器 Part1 ...
- angular 学习资源
README.md AngularJS学习 注:截至2016年10月,有一个[收集Angular 2的链接的新回购](https://github.com/jmcunningham/AngularJS ...
- c语言中void arrout,c语言学习笔记(数组、函数
<c语言学习笔记(数组.函数>由会员分享,可在线阅读,更多相关<c语言学习笔记(数组.函数(53页珍藏版)>请在人人文库网上搜索. 1.数组2010-3-29 22:40一维数 ...
- angular学习(六)—— 依赖注入
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/53409171 依赖注入 依赖注入(DI)是一种处理组件如何获得依赖的软件设计模 ...
- angular学习-2021.5
angular学习笔记 1.基本概览 模块 Module 组件 Component 指令 Directive 服务 Service 路由 Router 2. 模块Module 2.1 模块的含义 2. ...
最新文章
- 吴恩达“机器学习”——学习笔记六
- oracle语句怎么倒退,oracle RETURNING 子句使用方法
- 封装、继承、多态的理解
- latex排版基础_排版基础分类
- twisted系列教程六–继续重构twisted poetry client
- kafka原理_Kafka 架构原理,也就这么回事
- 给BERT加一个loss就能稳定提升?斯坦福+Facebook最新力作!
- 机器学习笔记(四)BP神经网络模型
- 详细版【循环神经网络RNN】(邱锡鹏)
- ireport中detail的伸展问题解决
- No exception of type Exception can be thrown
- 修改服务器ssh欢迎界面
- 游戏商店MySQL数据库设计
- 将一个自然数拆分为N个自然数
- 面向对象的分析(Object Oriented Analysis,OOA)模型有三种:功能模型 (用例图)对象模型(类图) 动态模型(状态图)
- esp8266之红外报警
- 大学一定要拿计算机证书吗,大学期间,一定要拿到这些证书,不要到了毕业才后悔...
- lower_bound,upper_bound的第四个参数的用法
- skywalking获取traceId(tid)的方式
- 阿语python美多商城-商品-商品详情页之第6.6.1节商品详情页分析和准备
热门文章
- Xcode最新版下载国内网盘下载 Xcode 6.2|Xocde 6.1|Xcode 6.1.1|Xcode 6.3 beta
- 倍增收入,大学生兼职经验分享
- 图像分类,物体检测,语义分割,实例分割等概念
- 真正的让电脑说话-c++
- strftime()函数的用法
- Git 仓库的备份与恢复
- DreamWeaver序列号和Dreamweaver CS4序列号以及Dreamweaver CS5 序列号
- 速收藏!最强数据集50个最佳机器学习公共数据!
- HOF特征+MBH特征
- python摸鱼小游戏:小鸟管道游戏【送源码】