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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
js几个验证函数代码
Mar 25 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
javascript基本算法汇总
2016/03/09 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python3人脸识别的两种方法
2019/04/25 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python运行异常管理解决方案
2020/03/09 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
质量标语大全
2014/06/12 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
SQL SERVER中的流程控制语句
2022/05/25 SQL Server