2017-04-06 5 views
0

tags-inputを使用してタグを削除するたびにdivを非表示にしたいとします。スクリーンショットをご覧ください。私は2017年4月の十字ボタンをクリックしたときに今、私はこれは私がヶ月を示すためのタグ入力を使用していたHTMLタグを使用してdivを隠す方法入力角度js

<div ng-show='monthlyReportForm' > 
<form name="monthlyReportFormPage" role="form" novalidate> 
    <div role="tabpanel" class="tab-pane top-o-border"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div asterick class="form-group" ng-class="{'form-group has-success': !error['enhancement_name'] && (submitted), 'form-group has-error': (error['enhancement_name']) && (submitted)}"> 
        <label for="enhancementName">Enhancement Name</label> 
        <input type="hidden" name="enhancementId" ng-model="data.enhancementId" value=""> 
        <input type="text" name="enhancementName" id="enhancementName" class="form-control" placeholder="Enhancement Name" ng-model="data.enhancementName" ng-required="true" value=""> 
        <span class="er-block" ng-show="monthlyReportFormPage.enhancementName.$touched && monthlyReportFormPage.enhancementName.$error.required">Please provide Enhancement Name.</span> 
        <span ng-show="error.enhancement_name" class="er-block">{{error.enhancement_name}}</span> 
       </div> 
      </div>  
      <div class="col-md-4"> 
       <div asterick class="form-group" ng-class="{'form-group has-success': !error['months'] && (submitted), 'form-group has-error': (error['months']) && (submitted)}"> 
        <label for="months">Months</label> 
        <tags-input ng-model="monthTags" on-tag-removed="removeDiv($tag)" ng-required="true"></tags-input> 
        <span class="er-block" ng-show="monthlyReportFormPage.months.$touched && monthlyReportFormPage.months.$error.required">Please select months.</span> 
        <span ng-show="error.months" class="er-block">{{error.months}}</span> 
       </div> 
      </div> 
      <div class="pull-right"> 
       <input type="hidden" name="enhancementId" id="enhancementId" class="form-control" ng-model="data.enhancementId" value=""> 
       <input type="hidden" name="id" id="id" class="form-control" ng-model="data.id" value=""> 
       <button class="btn btn-primary" ng-disabled="monthlyReportFormPage.$invalid" ng-click="addMonthlyReport()">{{buttonText}}</button> 
      </div> 
     </div> 
    </div> 
    <div role="tabpanel" class="tab-pane month-reports" ng-repeat="resource_type_efforts in data.resource_type"> 
     <span class="tab-pane-months">{{data.months[$index]}}</span> 
     <div class="row" ng-repeat="resourceTypeMonthly in data.resourceTypeMonthly"> 
      <div class="col-md-4"> 
       <div asterick class="form-group" ng-class="{'form-group has-success': !error['resourceType'] && (submitted), 'form-group has-error': (error['resourceType']) && (submitted)}"> 
        <label for="resourceType">Resource Type</label> 
        <input type="text" name="resourceType" id="resourceType" ng-model="resourceTypeMonthly" class="form-control" ng-required="true" ng-disabled="isDisabled" > 
        <span class="er-block" ng-show="monthlyReportFormPage.resourceType.$touched && monthlyReportFormPage.resourceType.$error.required">Please provide Resource type.</span> 
        <span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <label for="efforts">Efforts (in hours)</label> 
       <input type="text" name="efforts" id="efforts" class="form-control" ng-model="data.efforts[$parent.$index][$index]" value=""> 
      </div> 
     </div> 

    </div> 
</form> 
</div> 

である2017年4月 のdiv要素を非表示にする必要があり

enter image description here

タグ。ここではタグのリンク - 入力ライブラリtags-input,

お答えください。それは初心者、私のような誰かのために非常にうるさいでしょう。

答えて

1
<label for="months">Months</label> 
    <tags-input ng-model="monthTags" on-tag-removed="removeDiv($tag)" ng-required="true" ng-if="status"></tags-input> 

$scope.removeDiv = function() { 
    $scope.status = false; //update status value false 
} 

第二の方法:

あなたは

+0

は、あなたの答えは私のために有用であるAnkitありがとうウォッチ使用することができます – Ramkishan

0

あなたはon-tag-removedを使用し、メソッドremoveDiv($ tag)を呼び出しました。したがって、このメソッド内でブール変数を取り、このメソッドが呼び出されるとfalseにします。その変数を使用してng-showディレクティブを使用して、下のdivを表示または非表示にします。コントローラで

関連する問題