Angular学习（6）- 数组双向梆定+filter+directive

示例：

<!DOCTYPE html>
<html ng-app="MyApp">
<head><title>Study 6</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"}}</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;});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 = '';}};}};});</script>
</body>
</html>

转载于:https://www.cnblogs.com/HD/p/3630730.html

Angular学习（6）- 数组双向梆定+filter+directive相关推荐

Angular学习（5）- 数组双向梆定+filter
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head><title>Study 5< ...
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学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
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学习（6）- 数组双向梆定+filter+directive

Angular学习（6）- 数组双向梆定+filter+directive相关推荐

最新文章

热门文章