Question

我有2个日期选择器，默认情况下，我今天在签入日期中设置日期，明天在签出日期中设置日期 {1}}。

通过日期选择器选择另一个日期时，模型值会更改。

ng-model

当我的<div class="col-md-4"> <label class="control-label" for="date">Check In Date</label> <input class="form-control" id="date" name="date" value="{{date | date: 'yyyy-MM-dd'}}" ng-model="checkinDate" type="text"/> </div> <div class="col-md-4"> <label class="control-label" for="date1">Check Out Date</label> <input class="form-control" id="date1" name="date" value="{{date1 | date: 'yyyy-MM-dd'}}" ng-model="checkoutDate" type="text"/> </div> <div class="col-md-4"> <md-button class="md-raised" md-ripple-size="full" id="checkAvail" ng-click="checkAvail(roomdata.data)">CHECK AVAILABILITY</md-button> </div>发生变化时，我想在我的md按钮中添加一个类'shake'。

如何使用ng-model="checkoutDate"？

Answer 1

您最好的选择是使用ng-class并设置您的条件。类似的东西：

ng-class="{'shake': myModel == true}"

Answer 2

您在类表达式

中提供模型名称checkoutDate

<div class="col-md-4">
    <md-button class="md-raised" md-ripple-size="full" id="checkAvail" ng-click="checkAvail(roomdata.data)" ng-class="{shake: checkoutDate}">CHECK AVAILABILITY</md-button>
</div>

因此，当您在checkoutDate中选择一个值时，会添加类shake。

Answer 3

 <md-button class="badge" [ngClass]="{'md-raised': (status ==
 'NOT-CHANGED'), 'shake': (status == 'CHANGED')}" md-ripple-
  size="full" id="checkAvail" ng-click="checkAvail(roomdata.data)"> 
  Check Availability</md-button>

在代码中，您可以使用更改功能来捕获已选中的结帐日期，并在该功能中将“状态”更改为“已更改”，这将依次将您需要的类注入已定义的按钮

 <input class="form-control" id="date1" name="date" value="{{date1 | 
 date: 'yyyy-MM-dd'}}" ng-model="checkoutDate" ng-    
 click="changeStatus()" type="text"/>

更改状态将包含将变量状态从“未更改”转换为“已更改”

 changeStatus(){
     this.status = 'CHANGED';
 }

不要忘记在构造函数中定义状态。希望这有帮助

更改模型值时添加类

3 个答案: