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与FireFox的剪切板操作代码
Sep 28 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 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中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP开发注意事项总结
2015/02/04 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript中的this详解
2014/12/08 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python实现连续图文识别
2018/12/18 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
小露珠教学反思
2014/04/30 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
财务工作失职检讨书
2014/11/21 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS