按钮颜色变化时不变

<!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-秀在那里我得到两个按钮，只有当我在窗体外单击时，改变颜色的一个按钮才能工作。任何人都可以帮忙吗？

来源

2017-07-06 Hema Nandagopal

'如果其他loop'有没有这样的事情 –

我说我累了，如果别的路（角）这样，

–

Haha.Got吧:)编辑问题 –

下面是使用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类将添加到按钮中，将其颜色更改为蓝色。

来源

2017-07-06 10:26:27 georgeawg

太棒了:)谢谢。 –

使用纳克级的确定按钮的颜色：

<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>

来源

2017-07-06 09:40:15 rrd

你也能这样做在我的代码？我错过了你的逻辑。 –

用做它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; 
}

来源

2017-07-06 09:41:44 Maheshvirus

是的，我试图做到这一点，而无需触摸我的控制器文件。任何想法？ –

-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>

来源

2017-07-06 09:52:01

按钮颜色变化时不变

回答

相关问题