Angular.JS利用ng-disabled属性和ng-model实现禁用button效果


Posted in Javascript onApril 05, 2017

前言

本文要实现的效果是在输入框内无文字时,提交button是不能点击状态,在输入文字后会变为可点击状态,效果图如下:

Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

实现方法:

<div> 
 <div> 
  <textarea name="" id="" rows="3" class="form-control" ng-model="shyj" placeholder="在此输入审批意见"></textarea> 
 </div> 
 <div> 
  <div> 
   <button class="btn btn-sm btn-block btn-primary" ng-disabled="!shyj" 
    ng-click="agreeClick(SM.YGBH,SM.RQ,shyj);" ng-tap="$navigate.go('/home')"> 
   提交 
   </button> 
  </div> 
 </div> 
</div>

controller里其实不用做什么操作,html已经实现禁用效果了。放上来给大家随便看看吧。

$scope.agreeClick=function(v_shyg,v_rq,shyj){//审核通过 
 $scope.v_shzt=0; 
 $scope.v_shyg=v_shyg; 
 $scope.v_rq=v_rq; 
 $scope.shyj=shyj; 
 $scope.v_lsh=0; 
 /*if(!$scope.shyj||$scope.shyj==''){ 
  myTip("审核意见不能为空"); 
  return false; 
 }*/ 
 HomeService.agreeClick({YGBH:$scope.YGBH,v_rq:$scope.v_rq,v_shzt:$scope.v_shzt,v_shyg:$scope.v_shyg,v_shyj:$scope.shyj,v_lsh:$scope.v_lsh}).then(function(data){ 
  var info=data.msg; 
  if (info[0].code === "0") {//查询到结果 
  myTip("审核成功"); 
   $navigate.go("/LogList"); 
  }else{ 
   myTip("审核失败:"+info[0].msg); 
  } 
//  console.log("desk: %o", data); 
//  $scope.LogList=data.answers[0]; 
//  $scope.abc=data.answers[0][0].YGBH; 
//  console.log("bb: %o",$scope.abc); 
   }); 
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
js获取指定时间的前几秒
Apr 05 #Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 #Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 #Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 #Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 #Javascript
关于vuex的学习实践笔记
Apr 05 #Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 #Javascript
You might like
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
详解vuex的简单使用
2018/03/12 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Pytorch之parameters的使用
2019/12/31 Python
python中JWT用户认证的实现
2020/05/18 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
银行委托书范本
2014/09/28 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书