How to hide a div using tags-input angular js

Question

I want to hide a div on every removal of tag using tags-input. Take a look at screenshot.

Now when i click on cross button of April 2017 then I need to hide div of April 2017 This is the html

<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>

I am using tags-input for showing months as tags. here's the link for tags-input library tags-input , demo

Please suggest answer. It will be very holpful for newbie, someone like me.

Ankit Kumar Gupta · Accepted Answer · 2017-04-06 05:00:57Z

1

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

In controller:

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

2nd method:

you can use watch

answered Apr 6, 2017 at 5:00

Ankit Kumar Gupta

1,3223 gold badges10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramkishan Suthar Over a year ago

Thank you Ankit your answer is useful for me

kaushlendras · Accepted Answer · 2017-04-06 05:00:52Z

0

You have used on-tag-removed and called a method removeDiv($tag). So, within this method take a boolean variable and make it false when this method is called. use ng-show directive using that variable to show or hide the below divs.

answered Apr 6, 2017 at 5:00

kaushlendras

2201 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to hide a div using tags-input angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related