入力値に応じて入力時にクラスを切り替える

Question

私はまだAngularを初めて使っていますが、Angular 1.5をかなり使用している既存のアプリケーションがあります。

フォームのみ終了日の値または値のActiveを持つことができます。

は、私は次の基準に依存してクラスを追加するために必要な基本的なフォームを持っています。両方を持つことはできません。私は使用されていない入力の入力ボックスを無効にする必要があると思っていた。

Ex。ユーザーがEnd Date入力に日付を入力すると、Active for入力は無効になります。

私は、入力された入力変数が空であるか、または.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> 

ここに私のモーダルのスクリーンショットがあります。私が設定した条件の影響を受けないので、他の入力を無視してください。

おかげ

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> 

そうでない場合、あなたは値が存在しない場合にのみ、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はより優雅に見え、このシナリオにはもう少し適しています。