我使用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>
答案 0 :(得分:0)
有可能,您的$scope.selectDiscountTable
可能会在摘要周期之外被调用,因为它是从延迟函数内部触发的。由于这不是角度事件,您可能必须手动触发重新摘要以使视图同步。
尝试使用$scope.$evalAsync()
并更新其中的$ scope值。
答案 1 :(得分:0)
显然这是一个简单的解决方案,我所要做的就是将html中的ng-model从:ng-model="selectedTypeaheadValue"
更改为:ng-model="selectedTypeaheadValue.id"