Question

我正在使用angularjs自动完成。

每次从下拉列表中选择一个值时，填充自动填充的项目都应该更改。但他们并没有改变。我看到模型改变了，但没有完成。

这是我用于自动完成的指令。

.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: scope[iAttrs.uiItems],
            select: function() {
                $timeout(function() {
                    iElement.trigger('input');
                }, 0);
            }
        });
    };
})

在这里我如何使用自动完成功能：

<input type="text" name="indirizzo" data-ng-model="input.indirizzo" auto-complete ui-items="indirizzi" data-ng-model-options="{ updateOn: 'mousedown blur' }" />

每次我更改下拉列表时，$scope.indirizzi都会正确更改，但不会更改自动完成。

也许我应该使用watch或类似的东西？有什么建议吗？

谢谢

更新

也许我没有解释好。我有一个下拉列表，当选择一个值时，填写我的自动完成列表（如某些级联下拉列表）。

这里是下拉列表：

<select name="state" data-ng-options="s for s in states" data-ng-model="input.state" data-ng-change="fillAutoComplete(input.state)" />

fillAutocomplete功能是：

$scope.fillAutoComplete = function (state) {
        $scope.indirizzi = ...
}

现在，我更改了下拉列表中的值，$scope.indirizzi已正确更新，但自动填充列表未更新。

Answer 1

请使用angular检查此示例自动完成。

<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
    <input auto-complete ui-items="names" ng-model="selected">
    selected = {{selected}}
</div>

<强> JsCode

  function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

JSFiddle Working

Answer 2

我已将我的指令改为：

.directive('autoComplete', function($timeout) {
        return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                        iElement.trigger('input');
                    }, 0);
                }
            });

            scope.$watch(iAttrs.uiItems, function () {
                iElement.autocomplete("option", "source", scope[iAttrs.uiItems]);
            });
        };
    })

查看范围。$ watch

Answer 3

Autocomplete是一个jQuery插件，我想你必须调用$ scope。$ apply（）让Angular知道你已经改变了什么。

自动填充功能不会刷新其商品

3 个答案: