Question

如何在angularjs中选择特定选项时显示其他html。我们只想在其他选项中显示从日期和到日期文本字段，但在选择其他选项时隐藏这些选项。我试过ng-show="date_option=='Other'什么都没发生。

DEMO http://plnkr.co/edit/Xy49iha3bsCQui6uOaTV?p=preview
的 HTML

  <div ng-controller="ceilometerCtrl">
    <div id="ceilometer-stats">
         <form>

            <div class="form-group">
              <label>Period:</label>
              <div class="col-sm-2">
                <select ng-model="date_option" ng-options="value.label for value in date_options">

                </select>
              </div>
            </div>
            <div >
                  <label >From:</label>
                  <div class="col-sm-10">
                    <input type="text" id="date_from" name="date_from" />
                  </div>
                </div>
                <div>
                  <label>To:</label>
                  <div class="col-sm-10">
                    <input type="text" id="date_to" name="date_to"/>
                  </div>
               </div>
        </form>
    </div>

  </div>

“

角

var app=angular.module('hz',[]);
 app.controller('ceilometerCtrl', function($scope, $http){


   $scope.date_options=[
      {
           "value" : 1,
           "label" : "Last day"
      },
      {
           "value" : 7,
           "label" : "Last week"
      },
      {
           "value" : 23,
           "label" : "Month to date"
      },
      {
           "value" : 30,
           "label" : "Last 30 days"
      },
      {
           "value" : 356,
           "label" : "Last year"
      },
      {
           "value" : "Other",
           "label" : "Other"
      }
   ];

   $scope.date_option = $scope.date_options[1];
 });

Answer 1

根据您的js文件，您似乎需要使用ng-show="date_option.value=='Other'"

Plunker

Answer 2

将ng-option更改为

ng-options="value.label as value.label for value in date_options"

并且

$scope.date_option = $scope.date_options[1].label;

或在ng-show中使用

ng-show="date_option.value=='Other'"

如何在angularjs中选择特定选项时显示html元素？

2 个答案: