angular typeahead $ viewValue重命名后不更新

时间:2015-08-31 09:20:22

标签: javascript angularjs angular-ui-bootstrap angular-ui-typeahead

我使用angular v.1.2.28,我有一个复合元素,它将dropdown与typeahead结合起来:

<div class="btn-group vl-dropdown-container " style="width:100%" dropdown
                     ng-class="{disabledFunctionalityAndClick:isReadOnly}">

                    <a class="vl-dropdown-toggle vl-pf-dd-button" dropdown-toggle>
                        <span class="caret"></span>
                    </a>

                    <div style="overflow: hidden;">
                        <input placeholder="Select a discount table" class="vl-autocomplete  um-dd-input"
                               ng-model="selectedTypeaheadValue"
                               typeahead="discount as discount.id for discount in discountTablePool | filter:$viewValue"
                               typeahead-on-select="selectDiscountTable($item)"
                               typeahead-editable="false"
                               ng-blur="validateSelectedDiscount($viewValue)"/>
                    </div>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="discountTable in discountTablePool track by $index">
                            <a href dropdown-toggle ng-click="selectDiscountTable(discountTable)">{{discountTable
                                .id}}</a>
                        </li>
                    </ul>

                </div>

我还为用户提供了一个选项,可以通过单击打开模式的按钮来重命名当前选定的值:

<a class="um-menu-label" ng-click="renameDiscountTable()">Rename              </a>

一旦用户更新了该值并点击了确定,我就打电话给:

modalInstance.result.then(function (data) {

                        if ($scope.selectedDiscountTable.id != data.name) {
                            if ($scope.selectedDiscountTable.isFromServer === true) {
                                //check if it was already renamed
                                var obj = _.find($scope.renamedDiscountTables, {newName: $scope.selectedDiscountTable.id});
                                if (obj) {
                                    obj.newName = data.name;
                                }
                                else {
                                    $scope.renamedDiscountTables.push({
                                        oldName: $scope.selectedDiscountTable.id,
                                        newName: data.name
                                    });
                                }
                            }
                            $scope.selectedDiscountTable.id = data.name;
                          //THIS IS WHERE I CHANGE THE TYPEAHEAD MODEL VALUE    
                            $scope.selectDiscountTable($scope.selectedDiscountTable);
                        }


                }


 $scope.selectDiscountTable = function (discount) {
            $scope.selectedDiscountTable = discount;
            $scope.selectedTypeaheadValue = angular.copy($scope.selectedDiscountTable);
        };

问题是模型($scope.selectedTypeaheadValue)已更新,但显示给用户的值仍然是前一个,因此如果我将discount1重命名为discount2,则模型会更新,但用户仍会看到discount1:< / p>

![enter image description here

2 个答案:

答案 0 :(得分:0)

有可能,您的$scope.selectDiscountTable可能会在摘要周期之外被调用,因为它是从延迟函数内部触发的。由于这不是角度事件,您可能必须手动触发重新摘要以使视图同步。

尝试使用$scope.$evalAsync()并更新其中的$ scope值。

答案 1 :(得分:0)

显然这是一个简单的解决方案,我所要做的就是将html中的ng-model从:ng-model="selectedTypeaheadValue"更改为:ng-model="selectedTypeaheadValue.id"