Question

我希望仅在选择区域中选择其中一个选项时才显示我的按钮。

<div class="row" ng-controller='ctrl1'>
        <div class ="form_group">
            <select class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel' ng-click="selectHotel()"><option value="" selected disabled>Choose a hotel</option>
            </select>
        </div>

        <div class="col-md-6">      
            <h1>{{current_Hotel.hotel_name}}</h1>
            <p>{{current_Hotel.hotel_description}}</p>
            <img class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
            <btn class="btn btn-primary">Book a room </btn>
        </div>
</div>

我尝试过使用ng-show和ng-hide但它没有按照我的意愿工作。

Answer 1

使用具有多个条件的ng-if指令

<div class="col-md-6" ng-if="current_Hotel && current_Hotel != ''">
   <h1>{{current_Hotel.hotel_name}}</h1>
   <p>{{current_Hotel.hotel_description}}</p>
   <img class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
   <btn class="btn btn-primary">Book a room </btn>
</div>

Answer 2

ng-show或ng-hide应基于您在选择选项时分配的ng-model的值，假设您在同一范围内工作。

您是否尝试过ng-show="current_Hotel !== ''"？

Answer 3

选择选项时，将设置

选择的ngmodel，您需要检查是否选择了模型

<div class="row" ng-controller='ctrl1'>
        <div class ="form_group">
            <select class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel' ng-click="selectHotel()"><option value="" selected disabled>Choose a hotel</option>
            </select>
        </div>

        <div class="col-md-6">      
            <h1>{{current_Hotel.hotel_name}}</h1>
            <p>{{current_Hotel.hotel_description}}</p>
            <img class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
            <btn ng-show="current_Hotel" class="btn btn-primary">Book a room </btn>
        </div>
</div>

仅在选择选项时显示按钮

3 个答案: