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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
vue中英文切换实例代码
Jan 21 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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自动适应范围的分页代码
2008/08/05 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python实现祝福弹窗效果
2019/04/07 Python
python实现共轭梯度法
2019/07/03 Python
QML使用Python的函数过程解析
2019/09/26 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python collections模块的使用方法
2020/10/09 Python
python处理写入数据代码讲解
2020/10/22 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
电子商务专员岗位职责
2013/12/11 职场文书
毕业设计说明书
2014/05/07 职场文书
杜甫草堂导游词
2015/02/03 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书