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 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
浅谈jquery事件处理
Apr 24 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JavaScript实现分页效果
Mar 28 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
window.location.hash 使用说明
2010/11/08 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中的闭包总结
2014/09/18 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
施工班组长岗位职责
2014/01/05 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android