2

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

有第二个字段复选框，仅当下拉菜单选择“每周”值时才可见。我正在尝试使用 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>

4

2 回答 2

0

您不需要获取 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 而不是 description 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'">
于 2015-02-15T20:28:43.153 回答
0

可能有一个更优雅的“角度方式”解决方案，

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

变更说明

  • 提供ng-show了一个值vm.checker
  • 添加ng-change到选择元素并给它一个checkerGo测试下拉菜单=='每周'的函数，如果是则改变vm.checker

更新

还有一种更“有角度的方式”——使用表达式！
根据下面的@Omri Aharon 小提琴/评论。

于 2015-02-15T20:57:42.437 回答