AngularJs中如何使用DropDown选中的值作为Filter的参数？

Question

我正在使用 Select2 下拉菜单，它不是 Select 上的过滤器：-

我的代码：-

<div class="form-group">
                                    <script type="text/javascript">
                                            jQuery(document).ready(function($)
                                            {
                                                $("#select-res").select2();
                                        </script>
                                    <select class="form-control select" ng-model="displayName"  id="select-res">
                                        <option data-ng-repeat="objin objs" value="{{obj.displayName}}">{{obj.displayName}}</option>
                                    </select>
                                    <script>
                                        $('#select-res').select2().on('change', function(e) {
                                          var selectedval= $(this).val();
                                           alert(selectedval);
                                           // $("#filterselected").html(selectedval);
                                           // $("#filterselected").val(selectedval+' ');
                                            document.getElementById("filterselected").value = selectedval;
                                        });
                                    </script>
                                      <input id="filterselected" type="text" ng-model="displayName" />
                                </div>

我使用 data-ng-model="displayName" 进行双向绑定

过滤代码：-

<div data-ng-repeat="obj in objs | filter:displayname" >
       Results ....
</div>

我 Select 在 Select2 下拉列表中编辑的选项未输入过滤器参数。

我已将 Selected 值写入文本框，数据绑定为 ng-model ="displayName" 但未过滤 :-(

Answer 1

与其使用 select2 库，不如使用 angular 版本 ui-select2

在处理 angular 范围时提供更好的绑定。因为你想在这里绑定更改事件，你可以简单地使用 ng-change angular native 指令。

标记

<select ui-select2 ng-model="number" data-placeholder="Pick a number" ng-change="changeSelect()">
    <option value=""></option>
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

Answer 2

问题可能在于，jquery 小部件可以附加额外的输入元素，从而破坏 angular 链接。如果是这样，我可以建议尝试 2 个解决方案：

使用angular-ui/ui-select代替select2
如果您有点拒绝，请使用 angular scopes $apply 方法让 angular 知道发生了一些变化。我不知道你的 html 是否在控制器之下，如果是的话你可以在你的 onchange 处理程序

$apply("displayName = '"+selectedval+"'")

也可能有很多其他原因，例如表单和过滤器在不同的范围内

AngularJs中如何使用DropDown选中的值作为Filter的参数？

How to Use DropDown Selected Vaue as Parameter for Filter in AngularJs?

javascript

jquery

angularjs

angular-filters