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 相关文章推荐
js一组验证函数
Dec 20 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
JS跨域代码片段
Aug 30 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
vue设置默认首页的操作
Aug 12 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python异常处理操作实例详解
2018/08/28 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
法律专业实习鉴定
2013/12/22 职场文书
建筑个人求职信范文
2014/01/25 职场文书
户外亲子活动总结
2015/05/08 职场文书
小学英语听课心得体会
2016/01/14 职场文书