Question

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

当触摸输入时，我正在尝试更改删除按钮颜色。我尝试使用if else，它没有工作。所以，使用ng-show我得到两个按钮和一个按钮改变了颜色只有当我在表单外单击时才能正常工作。任何人都可以帮忙吗？

Answer 1

以下是在输入有效时使用ng-class directive更改类的示例：

＆＃13;

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

＆＃13;

当输入为空时，删除按钮为灰色。当输入有效时，btn-primary类将添加到按钮，将其颜色更改为蓝色。

Answer 2

使用ng-class确定按钮的颜色：

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

然后，只有当'触摸'myInput字段时，该特定按钮的颜色才会改变。我知道这似乎与你想要的相反，但是，默认情况下所有字段都不受影响。因此，如果您将其设为默认值（.btn-untouched），那么它就会准备好并在触摸时更改颜色。然后你只需要一个按钮，因为你可以堆叠ng-class选项，例如：

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

Answer 3

使用ng-click

执行此操作

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

Answer 4

只需一个按钮即可尝试，并通过ngclass

更改类

＆＃13;

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

＆＃13;

未受影响的按钮颜色更改

4 个答案: