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实现计算加载页面所用的时间
Apr 02 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
理解JavaScript中的对象
Aug 25 Javascript
Vue实现菜单切换功能
Nov 08 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
Python 可爱的大小写
2008/09/06 Python
python实用代码片段收集贴
2015/06/03 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python构造IP报文实例
2020/05/05 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
小学教师节活动方案
2014/01/31 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
医药销售自荐书
2014/05/29 职场文书
故宫的导游词
2015/01/31 职场文书
未中标通知书
2015/04/17 职场文书
2015入党自传书范文
2015/06/26 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS