在 AngularJs 中隐藏和显示 ng-repeat

Question

我有一个下拉列表和 ng-repeat 数据。当页面加载时，我想隐藏 ng-repeat 并根据下拉数据的选择，我想显示 ng-repeat。 UI如下：

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

页面加载时，下拉列表中的数据为“-- Select the Season --”。在加载时，我想隐藏 "divMultilingualText" 和 ng-repeat。如果用户在下拉列表中选择任何其他数据，那么我想显示 "divMultilingualText" 和 ng-repeat 数据。

如何实现？谢谢

Answer 1

试试这个：

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

或

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

Answer 2

使用ng-if或ng-show/ng-hide。

ng-if : 添加和删除 DOM 元素。

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

ng-show : 只需隐藏和显示 DOM css 方式。

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

在 AngularJs 中隐藏和显示 ng-repeat

Hide and show ng-repeat in AngularJs

angularjs

angularjs-ng-repeat

ng-repeat