javascript - 从下拉列表中选择某个值时使用 ng-show 显示输入

Question

我从 json 获取信息并在下拉列表中打印。接下来，我的代码:

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

在我的 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>

返回值只有3:

Apple
Orange
Mango

我想要做的是，如果用户选择“Apple”，则显示输入:

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

现在，用 ng-show="false"隐藏，但是，如果下拉列表的值为“Apple”，我必须做什么来显示/隐藏输入？猜测很简单，但现在我一片空白。

提前致谢。

Answer 1

你可以使用ng-if而不是ng-show/hide选项。这是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>