Angular JS ng-show/ hide based on drop-down list selected value

Question

在下面的代码中，我有一个用于服务类型的下拉列表 (serviceSmallId)。它使用模型信息填充。

还有第二个字段复选框，只有当下拉菜单的选定值为 'Weekly' 时，该复选框才应该可见。我正在尝试使用 angular 的 ng-show/hide。

我试图寻找可能的解决方案，但没有成功。谁能指导我做错了什么。

<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
    <section class="matter">
        <div class="container">

            <div>
                <button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
                <button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
                <button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
                <span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
            </div>

            <div class="row">
                <div class="widget wblue">
                    <div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>

                    <form class="form-horizontal">

<div class="form-group">
                            <label for="serviceSmallId" class="col-sm-2">Service</label>
                            <div class="col-sm-4">
                                <select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
                                        ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
                                </select>
                            </div>
                        </div>



 <div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
                            <input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
                        </div>

 </form>
                </div>
            </div>
        </div>
    </section>
</section>

Answer 1

您不需要获取值属性因为 ng-model 保存的不是元素而是值本身；

 <div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">

必须

 <div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">

编辑：在您的情况下 vm.scrubber.serviceSmallId 将包含 ID 而不是描述 Weekly。我建议您使用 ng-change 指令在您的控制器中调用一个函数，该函数将根据 ID 查找项目并在控制器中设置为对 ng-show 可见。

  <select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
            ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
            ng-change="vm.selectObj()">

vm.selectObj() 将查找范围内的当前选定对象并将其设置为控制器变量（例如：vm.selectedItem）和：

  <div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">

Answer 2

可能有一个更优雅的 "angular way" 解决方案，

但我在这里更新了你的代码以工作 - http://jsbin.com/tupisoriho/1/edit?html,js,output

更改说明

已提供 ng-show 一个值 vm.checker
将 ng-change 添加到 select 元素并给它一个函数 checkerGo 测试是否下拉 == 'weekly'，如果是则更改 vm.checker

更新

还有更 "angular way" - 使用表达式！
根据下面的@Omri Aharon fiddle/comment。

Angular JS ng-show/ hide based on drop-down list selected value

Angular JS ng-show/ hide based on drop-down list selected value

angularjs

ng-show

ng-hide

更改说明

更新