Angularjs 根据输入切换类'；s值

我还不熟悉Angular，但我有一个现有的应用程序，它大量使用Angular 1.5

我有一个基本表单，需要根据以下条件向其中添加一个类：

表单只能有“结束日期”值或“活动日期”值。它不能两者兼而有之。我想我需要禁用未使用的输入的输入框

例如，如果用户在结束日期输入中输入日期，则激活的输入将被禁用

我研究了ng if，但我遇到的每个示例都是为了检查输入的输入变量是否为空或是否等于.js控制器中的值，而不是检查当前输入的变量是否等于表单中输入的另一个变量

<div class="form-group">
    <label>End date:</label>
    <div class="input-group">
        <input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
        </span>
    </div>
</div>
<div class="form-group">
    <label>Or will be active for:</label>
    <input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>

结束日期：
或将在以下情况下处于活动状态：

这是我的模态的屏幕截图。忽略其他输入，因为它们不受我列出的条件的影响

谢谢

---

您有几个选择。类，如您所述，或

ng（如果

）。

ng if

看起来更优雅，如下所示：

<div class="form-group" ng-if="updatePatientLabel.active_end_date != ''">
    <label>End date:</label>
    <div class="input-group">
        <input type="text" class="form-control" is-open="endDateOpened" uib-datepicker-popup="MM/dd/yyyy" ng-model="updatePatientLabel.active_end_date"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-search" ng-click="openEndDate($event)"><i class="fa fa-calendar"></i></button>
        </span>
    </div>
</div>
<div class="form-group" ng-if="updatePatientLabel.expiration_time_number > 0">
    <label>Or will be active for:</label>
    <input name="expirationTimeNumber" type="number" class="form-control time" ng-model="updatePatientLabel.expiration_time_number"/>
</div>

---

我在我的项目中都使用了这两种方法，任何一种都是完全可以接受的。不过，

ng if

确实看起来更优雅，更适合这种情况。

您可以使用

ng disabled

//initialize your dates with null
$scope.updatePatientLabel = {};
$scope.updatePatientLabel.active_end_date = null;
$scope.updatePatientLabel.expiration_time_number = null;

HTML:

<input id="endDate" ng-disabled="updatePatientLabel.expiration_time_number !== null" ng-model="updatePatientLabel.active_end_date" />

<input id="activeDate" ng-disabled="updatePatientLabel.active_end_date !== null" ng-model="updatePatientLabel.expiration_time_number" />

---

工作正常。非常感谢你！

<input id="endDate" ng-disabled="updatePatientLabel.expiration_time_number !== null" ng-model="updatePatientLabel.active_end_date" />

<input id="activeDate" ng-disabled="updatePatientLabel.active_end_date !== null" ng-model="updatePatientLabel.expiration_time_number" />