Angular.JS利用ng-disabled屬性和ng-model實(shí)現(xiàn)禁用button效果
更新時(shí)間：2017年04月05日 14:11:33 投稿：daisy
這篇文章主要介紹了Angular.JS利用ng-disabled屬性和ng-model實(shí)現(xiàn)禁用button效果的相關(guān)資料，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
前言
本文要實(shí)現(xiàn)的效果是在輸入框內(nèi)無文字時(shí)，提交button是不能點(diǎn)擊狀態(tài)，在輸入文字后會(huì)變?yōu)榭牲c(diǎn)擊狀態(tài)，效果圖如下：
實(shí)現(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里其實(shí)不用做什么操作，html已經(jīng)實(shí)現(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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
詳解Angular-ui-BootStrap組件的解釋以及使用
這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Angular2 (RC5) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
AngularJS基礎(chǔ) ng-srcset 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-srcset 指令,這里對(duì)ng-srcset 指令做了詳細(xì)的資料整理，附有代碼示例，有需要的小伙伴可以參考下2016-08-08
angularjs中控制視圖的控制器的兩種注入依賴項(xiàng)及服務(wù)的寫法小結(jié)
在AngularJS中,控制器的依賴注入有兩種方法：顯式依賴注入和隱匿依賴注入,顯式依賴注入通過使用字符串?dāng)?shù)組形式來注入依賴項(xiàng),本文給大家介紹angularjs中控制視圖的控制器的兩種注入依賴項(xiàng)及服務(wù)的寫法,感興趣的朋友一起看看吧2024-09-09
詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證，客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。AngularJS表單驗(yàn)證可以讓你從一開始就寫出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單，對(duì)AngularJS表單驗(yàn)證感興趣的小伙伴們可以參考一下2015-12-12
Angular2中select用法之設(shè)置默認(rèn)值與事件詳解
在Angular.JS中可以使用數(shù)組或?qū)ο髣?chuàng)建一個(gè)下拉列表選項(xiàng)。關(guān)于Angular.js中select的基礎(chǔ)相信大家應(yīng)該都已經(jīng)了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設(shè)置默認(rèn)值與事件的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
Angularjs 創(chuàng)建可復(fù)用組件實(shí)例代碼
這篇文章主要介紹了Angularjs 創(chuàng)建可復(fù)用組件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了angular *Ngif else用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08