angular-xeditable
http://vitalets.github.io/angular-xeditable/#text-simple
ng-repeat="user in users" e-rows="7" e-cols="40" e-style="color: green" buttons="no" onaftersave <form editable-form name="editableForm" onaftersave="saveUser()"> or e-form="rowform"
<span editable-text="user.name" onbeforesave="checkName($data)"> onbeforesave="checkName($data, user.id)"
{{ user.name || 'empty' }}
</span>
<span editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
-----------------
<a href="#" editable-select="user.group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
{{ user.groupName || 'not set' }}
</a>
$scope.groups = [];
$scope.loadGroups = function() {
return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
$scope.groups = data;
});
-----------
$scope.users = [
{id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
{id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
{id: 3, name: 'awesome user3', status: 2, group: null}
];
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
$scope.showStatus = function(user) {
var selected = [];
if(user.status) {
selected = $filter('filter')($scope.statuses, {value: user.status});
}
return selected.length ? selected[0].text : 'Not set';
};
$scope.checkName = function(data) {
if (data !== 'awesome') {
return "Username should be `awesome`";
}
};
<a href="#" editable-checkbox="user.remember" e-title="Remember?">
{{ user.remember && "Remember me!" || "Don't remember" }}
</a>
<a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'}
];
$scope.showStatus = function() {
var selected = [];
angular.forEach($scope.statuses, function(s) {
if ($scope.user.status.indexOf(s.value) >= 0) {
selected.push(s.text);
}
});
return selected.length ? selected.join(', ') : 'Not set';
};
<a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'}
];
$scope.showStatus = function() {
var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
};
<a href="#" editable-bsdate="user.dob" e-datepicker-popup="dd-MMMM-yyyy">
{{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}
</a>
app.controller('Ctrl', function($scope, $filter) {
$scope.user = {
dob: new Date(1984, 4, 15)
};
angular-xeditable的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- TypeScript: Angular 2 的秘密武器(译)
本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...
- angular实现统一的消息服务
后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...
- div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- Angular企业级开发(4)-ngResource和REST介绍
一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...
- Angular企业级开发(3)-Angular MVC实现
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...
- Angular企业级开发(2)-搭建Angular开发环境
1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
随机推荐
- 定义函数def
- ajax请求成功或失败的参数
success:function(response, status, xhr){ }, error:function(xhr, errorText, errorType){ alert(errorTe ...
- [html] Webp、Apng图片格式
WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间. 与JPEG相同,WebP是一种有损压缩.但谷 ...
- 关于 MySQL LEFT JOIN 你可能需要了解的三点(zhuan)
http://www.oschina.net/question/89964_65912 ****************************************** 即使你认为自己已对 MyS ...
- PKCS #1 RSA Encryption Version 1.5
PKCS #1 RSA Encryption Version 1.5 在进行RSA运算时需要将源数据D转化为Encryption block(EB).其中pkcs1padding V1.5的填充模式 ...
- Mybatis 级联查询 (一对多 )
后台系统中 涉及到添加试卷 问题 答案的一个模块的.我需要通过试卷 查询出所有的试题,以及试题的答案.这个主要要使用到Mybatis的级联查询. 通过试卷 查询出与该试卷相关的试题(一对多),查询出试 ...
- hiho_1057_performance_log
题目大意 给出一个函数调用日志,判断日志是否合法,且求出合法日志中函数调用的时间长度. 题目链接:performance log 题目分析 首先需要清除非法日志的几种情形: (1)日志的时间戳不是按照 ...
- Ramdisk文件系统无法启动
当kernel是使用ramdisk时,bootm命令有两种使用方式: 1.bootm ${kernel_addr} 此种方式要求bootargs变量包含ramdisk的地址和大小,ramdisk的格式 ...
- Jenkins运行完Test后,把ngreport生成的测试报告 拷贝到相应的文件夹
F:cd F:\program\apache-tomcat-7.0.67\webapps\Set currentPath=F:\program\apache-tomcat-7.0.67\webapps ...
- ios 修改导航条返回按钮
ios 修改导航条返回按钮 方式一:使用系统的:可以更改系统的文字:以及通过设置导航条的颜色来达到预期的效果 UIBarButtonItem *backBtns = [[UIBarButtonItem ...