Question

我还是Angular的新手，但我有一个非常重要的使用Angular 1.5的现有应用程序。

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

表单只能有End Date值或Active for value。它不能兼得。我以为我需要禁用未使用的输入的输入框。

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

我查看了ng-if但是我遇到的每个例子都是检查输入的输入变量是空的还是等于.js控制器中的值，而不是检查当前输入的变量是否等于另一个输入的变量in形式。

#N/A

以下是我的模态的截图。忽略其他输入，因为它们不受我所规定的条件的影响。

由于

Form Screen Shot

Answer 1

您可以使用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" />

Answer 2

您有几个选择。正如您所提到的，类或ng-if。 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>

否则，您可以进行内联条件输出＆＃34;隐藏＆＃34;仅在值不存在时才在class属性内。像这样：

<div class="form-group {{updatePatientLabel.active_end_date != '' ? '' : 'hidden'}}">
    <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 {{updatePatientLabel.expiration_time_number > 0 ? '' : 'hidden'}}">
    <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看起来更优雅，更适合这种情况。

根据输入值切换输入类

2 个答案: