CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
venkat14
venkat14

Reputation: 623

Hide and show ng-repeat in AngularJs

I have a dropdown and ng-repeat data. When the page loads, I want to hide the ng-repeat and based on selection of the dropdown data, i want to show the ng-repeat. The UI is as below:

<div class="row">
                    <div class="col-sm-2">
                        <label class="control-label">Seasons :</label>
                    </div>
                    <div class="col-sm-4 form-group">
                        <select name="seasonsTypeSelect" required="" ng-model="selectedseasonType" class="dropdown form-control cl-sm-6" ng-options="season.SeasonsTypeName for season in seasons" ng-change="updateImageUrl(selectedSeasonsType)">
                            <option value="">-- Select the Season --</option>
                        </select>                        
                    </div>                    
                </div>

 <div class="row" id="divMultilingualText" >
                    <div class="form-group ">
                        <label class="form-group col-md-3">Language</label>
                        <label class="form-group col-md-4">Title</label>
                        <label class="form-group col-md-5">Description</label>
                    </div>
                </div>
                <div class="row" ng-repeat="Descriptions in seasonssWithDescription ">                   
                    <div class="form-group col-md-2 top-Margin-language">
                        <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                    </div>
                    <div class="form-group col-md-4 top-Margin-Title">
                        <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />                       
                    </div>

                    <div class="form-group col-md-5">
                        <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>                      
                    </div>

                    <div class="form-group col-md-1">
                        <a style="cursor:pointer">
                            <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || seasonsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
                        </a>

                    </div>
                </div>

When the page loads, the dropdown has data as "-- Select the Season --" . At load, I want to hide "divMultilingualText" and the ng-repeat. If the user selects any other data in the dropdown, then I want to shown "divMultilingualText" and the ng-repeat data.

How to achieve this? Thanks

Upvotes: 0

Views: 598

Answers (2)

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

Use ng-if or ng-show/ng-hide.

ng-if : add and remove the DOM element.

<div class="row" id="divMultilingualText" ng-if="selectedseasonType" >

ng-show : Just hide and show the DOM css way.

<div class="row" id="divMultilingualText" ng-show="selectedseasonType">

Upvotes: 1

Sagar Hirapara
Sagar Hirapara

Reputation: 1697

Try this:

<div class="row" id="divMultilingualText" ng-if="selectedseasonType" >

or

<div class="row" id="divMultilingualText" ng-show="selectedseasonType>0" >

Upvotes: 1

Related Questions