Question

我使用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>

Answer 1

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

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

Answer 2

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

angular typeahead $ viewValue重命名后不更新

2 个答案: