Angular.JS利用ng-disabled屬性和ng-model實現(xiàn)禁用button效果

更新時間：2017年04月05日 14:11:33 投稿：daisy

這篇文章主要介紹了Angular.JS利用ng-disabled屬性和ng-model實現(xiàn)禁用button效果的相關(guān)資料，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。

前言

本文要實現(xiàn)的效果是在輸入框內(nèi)無文字時，提交button是不能點擊狀態(tài)，在輸入文字后會變?yōu)榭牲c擊狀態(tài)，效果圖如下：

實現(xiàn)方法：

<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已經(jīng)實現(xiàn)禁用效果了。放上來給大家隨便看看吧。

$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") {//查詢到結(jié)果 
  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); 
   }); 
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

如何在Angular2中使用jQuery及其插件的方法
本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
詳解Angular-ui-BootStrap組件的解釋以及使用
這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Angular2 (RC5) 路由與導(dǎo)航詳解
這篇文章主要介紹了Angular2 (RC5) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下
2016-09-09
AngularJS基礎(chǔ) ng-srcset 指令簡單示例
本文主要介紹AngularJS ng-srcset 指令,這里對ng-srcset 指令做了詳細的資料整理，附有代碼示例，有需要的小伙伴可以參考下
2016-08-08
angularjs中控制視圖的控制器的兩種注入依賴項及服務(wù)的寫法小結(jié)
在AngularJS中,控制器的依賴注入有兩種方法：顯式依賴注入和隱匿依賴注入,顯式依賴注入通過使用字符串數(shù)組形式來注入依賴項,本文給大家介紹angularjs中控制視圖的控制器的兩種注入依賴項及服務(wù)的寫法,感興趣的朋友一起看看吧
2024-09-09
詳解AngularJS實現(xiàn)表單驗證
這篇文章主要介紹了AngularJS實現(xiàn)表單驗證，客戶端表單驗證是AngularJS里面最酷的功能之一。AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應(yīng)的現(xiàn)代HTML5表單，對AngularJS表單驗證感興趣的小伙伴們可以參考一下
2015-12-12
Angular2中select用法之設(shè)置默認值與事件詳解
在Angular.JS中可以使用數(shù)組或?qū)ο髣?chuàng)建一個下拉列表選項。關(guān)于Angular.js中select的基礎(chǔ)相信大家應(yīng)該都已經(jīng)了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設(shè)置默認值與事件的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05
Angularjs 創(chuàng)建可復(fù)用組件實例代碼
這篇文章主要介紹了Angularjs 創(chuàng)建可復(fù)用組件實例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
angular *Ngif else用法詳解
這篇文章主要介紹了angular *Ngif else用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程，具有一定的參考價值，有興趣的可以了解一下
2017-08-08