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 相关文章推荐
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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
smarty实例教程
2006/11/19 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php实现购物车功能(上)
2020/07/23 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
怎样在程序里获得一个空指针
2015/01/24 面试题
应届生护士求职信
2013/11/01 职场文书
作文评语集锦大全
2014/04/23 职场文书
化工专业求职信
2014/07/01 职场文书
建筑学专业自荐书
2014/07/09 职场文书
高中军训的心得体会
2014/09/01 职场文书
学习十八大的心得体会
2014/09/12 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
Python几种酷炫的进度条的方式
2022/04/11 Python