Question

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

还有第二个字段复选框，只有当下拉列表中的选项值为“每周”时才能看到。我正在尝试使用ng-show / hide of angular。

我试图寻找可能的解决方案，但没有运气。任何人都可以指导我做错了什么。

＆＃13;

<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>

＆＃13;

Answer 1

您不需要获取value属性，因为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

可能有更优雅的角度方式＆＃34;解决方案，

但我已将您的代码更新为此处 - http://jsbin.com/tupisoriho/1/edit?html,js,output

更改说明

提供ng-show值vm.checker
将ng-change添加到select元素并为其提供了一个函数checkerGo，该函数测试了是否下拉==＆＃39;每周＆＃39;，如果是，则更改vm.checker

更新

更多＆＃34;有角度的方式＆＃34; - 使用表达式！
按照@Omri Aharon的说法/评论如下。

Angular JS ng-show / hide基于下拉列表选择的值

2 个答案:

更改说明

更新