geeks
geeks

Reputation: 2055

How to show html element, on selecting specific option in angularjs?

How to show the other html when selecting specific option in angularjs. I want to only show the From Date and To Date text field, when we select Other option, but hide these when we choose other options. I tried ng-show="date_option=='Other' nothing happened.

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>

"

Angular

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];
 });

Upvotes: 0

Views: 53

Answers (2)

Hmahwish
Hmahwish

Reputation: 2232

Either change your ng-option to

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

And

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

or in ng-show use

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

Upvotes: 1

Mike
Mike

Reputation: 1316

Based on your js file, it looks like you would need to use ng-show="date_option.value=='Other'"

Plunker

Upvotes: 1

Related Questions