.html

<div>
{{instance.description}}
<span class="glyphicon glyphicon-pencil btn-link" ng-click="editInstance(instance)" ></span>
</div> //以下是做出弹出框
<script type="text/ng-template" id="edit-instance-desc.html">
<div class="modal-header">
<h3>Please Edit Instance's Description</h3>
</div> <div class="modal-body">
<input class="text form-control" value="{$ instance.description $}" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue; this.style.color='#999'}" style="color:#999" ng-model="description" id="description" />
</div> <div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="confirm(description)">Submit</button>
</div>
</script>

  

.js

// edit instance's description
$scope.editInstance = function(instance){
var modalInstance = $modal.open({
templateUrl: 'edit-instance-desc.html',
controller: EditInstanceDescController,
resolve: {
instance: function(){
return instance;
}
}
});
modalInstance.result.then(function(data) {
if (data['error']){
growl.error(data['error']);
}else {
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
}
}, function(){
});
};
var EditInstanceDescController = function($scope, $modalInstance, growl, CommonHttpService, instance){
$scope.instance = instance;
$scope.description = instance.description;
$scope.cancel = function(){
$modalInstance.dismiss();
};
$scope.confirm = function(description){
api_url = '/api/user/instance/' + instance.id + '/';
post_data = {
"editInstance":description
};
CommonHttpService.put(api_url, post_data).then(function(data){
instance.description = description;
$modalInstance.close(data);
}, function(){
$modalInstance.close(data);
});
}
};

  

bootstrap的编辑标记 angularjs input 弹出框的更多相关文章

  1. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  3. Bootstrap方法为页面添加一个弹出框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. bootstrap插件bootbox参数和自定义弹出框宽度设置

    插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...

  5. 解决jsp中编辑和删除时候弹出框闪退的问题。

    ---恢复内容开始--- /* 火箭设备特殊记载</li> <!-- yw4 --> */ function getYw4DL(){ var controlparm={&quo ...

  6. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  7. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  8. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

  9. Bootstrap篇:弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

随机推荐

  1. Python 常用string函数

    Python 常用string函数 字符串中字符大小写的变换 1. str.lower()   //小写>>> 'SkatE'.lower()'skate' 2. str.upper ...

  2. C ~ 链式队列与循环队列

          此处的链式与循环队列可以应用于BFS和树的层序遍历.下面是对其结构和基本操作的程序描述. 1.循环队列 解决循环队列的队空和队满的方法: [1].增加一个参数count,用来记录数组中当前 ...

  3. C#微信公众平台账号开发,从零到整,步骤详细。

    想到微信的火热,想到其他公司开发手游,如雷电,酷跑类的,都不是很火,但是弱智的“打飞机”和“天天酷跑”却是那么火热.于是乎,想做个微信营销的软件.首先想到的是手机连电脑wifi,用抓包工具抓微信的包, ...

  4. 如何优雅地使用 Windows 10 ?

    身为一个伪电脑Geek,就算不懂电脑,也要把那些更不懂电脑的人给唬住. 1.入门级别: 当然就是让别人从视觉上感觉你的电脑不一般啦 第一步:桌面要干净,干净到什么程度呢,要像这样 当别人第一眼看到你的 ...

  5. 2016年湖南省第十二届大学生计算机程序设计竞赛Problem A 2016 找规律归类

    Problem A: 2016 Time Limit: 5 Sec  Memory Limit: 128 MB Description  给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) ...

  6. 一道js面试题

     当然这道面试题并不一定就能在你面试的时候遇到,但是不怕一万就怕万一,会的多一些还是好的. 问:怎么判断一串字符中哪个字符出现的最多,最多几次或者这串字符分别有哪些,每个字符出现了几次.写你请出运算代 ...

  7. svg-高斯模糊+swiper伦播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  9. JavaScript基础系列(变量与类型)

    以下内容将JavaScript简称为JS 打开本文时不管你是零基础的初学者还是其他语言的老兵,我都想说程序语言的基础支撑起了整个网络世界,不把这些基础学透之后稍复杂的内容会让你寸步难行. 现在先给编程 ...

  10. xmpp整理笔记:聊天信息的发送与显示

    任何一个信息的发送都需要关注两个部分,信息的发出,和信息在界面中的显示 往期回顾: xmpp整理笔记:环境的快速配置(附安装包)  http://www.cnblogs.com/dsxniubilit ...