Reputation: 2055
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
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