2017-07-06 214 views
1

按鈕顏色變化時不變

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<body ng-app=""> 
 

 
<p>Dummy form</p> 
 

 
<form name="myForm"> 
 
<input name="myInput" ng-model="myInput" required /> 
 

 
<div ng-show="myForm.myInput.$untouched"> 
 
<input type="button" ng-click="deleteRow($event,name)" value="Remove" class="btn" > 
 
</div> 
 
<div ng-show="myForm.myInput.$valid"> 
 
<input type="button" ng-click="deleteRow($event,name)" value="Remove" class="btn btn-primary" ></div></form> 
 

 
</body> 
 
</html>

當輸入被感動我試圖改變刪除按鈕color.I試圖用的if else,它不是working.So,採用NG-秀在那裏我得到兩個按鈕,只有當我在窗體外單擊時,改變顏色的一個按鈕才能工作。任何人都可以幫忙嗎?

+0

'如果其他loop'有沒有這樣的事情 –

+0

我說我累了,如果別的路(角)這樣,

+0

Haha.Got吧:)編輯問題 –

回答

3

下面是使用ng-class directive更改類當輸入爲有效的一個例子:

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<body ng-app=""> 
 

 
<p>Dummy form</p> 
 

 
<form name="myForm"> 
 
    <input name="myInput" ng-model="myInput" required /> 
 

 
    <input type="button" ng-click="deleteRow($event,name)" 
 
      value="Remove" class="btn" 
 
      ng-class="{'btn-primary': myForm.myInput.$valid}" /> 
 

 
</form> 
 
</body> 
 
</html>

當輸入是空的,刪除按鈕是灰色的。當輸入有效時,btn-primary類將添加到按鈕中,將其顏色更改爲藍色。

+0

太棒了:)謝謝。 –

0

使用納克級的確定按鈕的顏色:

<input type="button" class="btn btn-untouched" 
    ng-class="{'coloured': myForm.myInput.$touched }" /> 

那麼只有當myInput場「感動」,將特定的按鈕改變顏色。我知道這與你想要的相反,但是,默認情況下,所有字段都是未觸及的。因此,如果您將其設置爲默認值(.btn-untouched),那麼它將在那裏全部準備就緒,並在觸摸時更改顏色。然後,你只需要一個按鈕,因爲你可以堆疊納克級的選項,例如:

<form name="myForm"> 
    <input name="myInput" ng-model="myInput" required /> 
    <input name="myInput" ng-model="myInput1" required /> 

    <input type="button" class="btn btn-untouched" 
    ng-click="deleteRow($event, name)" 
    ng-class="{'coloured': myForm.myInput.$touched, 'complete': myForm.myInput.$valid }" 
    value="Remove" 
    id="removeButton" /> 
</form> 
+0

你也能這樣做在我的代碼?我錯過了你的邏輯。 –

0

用做它NG單擊

<input name="myInput" ng-model="myInput" ng-click="ChangeColor()"required /> 

<input type="button" ng-click="deleteRow($event,name)" value="Remove" ng-class="{'btn-warning': started, 'btn-danger': !started}" > 

內部控制器

$scope.started = false; 
$scope.ChangeColor=function(){ 
$scope.started = true; 
} 
+0

是的,我試圖做到這一點,而無需觸摸我的控制器文件。任何想法? –

-1

試用此按鈕只需一個按鈕,並通過ngclass更改班級

<div> 
 
<input ng-class="{'btn-primary':myForm.myInput.$valid}" type="button" ng-click="deleteRow($event,name)" value="Remove" class="btn btn-primary" ></div>