Show input with ng-show when select some value from dropdown

Question

I'm getting info from json and printing on a dropdown. Next, my code:

function firstCombo (){
    $http.get('app/combo.json')
    .then(function(data){
        vm.dataCombo = data.data;
        //console.log(vm.dataCombo);
    });
}

On my html view:

<div class="col-md-4 col-md-offset-3"> What is this?
                    <button type="button" id="options1" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">
                        Select one <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="list1">
                        <li ng-repeat="dea in $ctrl.dataCombo"><a href="#">{{dea.value}}</a></li>
                    </ul>
                </div>

The returned values are just 3:

Apple
Orange
Mango

What i want to do, is to show an input if the user selects "Apple":

<div class="row" ng-show="false">
                <div class="col-md-4">What kind of apple?<input type="text" class="form-control"></div>
            </div>

Right now, is hidden with ng-show="false", but, what am i have to do to show/hide the input if the value of dropdown is "Apple"? Guess is very simple, but right now, i'm in blank.

Thanx in advance.

Answer 1

you can use ng-if rather than ng-show/hide option.This is one of best practice in AngularJs

<div class="row" ng-if="selectedValue=='Apple'">
 <div class="col-md-4">What kind of apple?<input type="text" class="form-control"></div>
</div>