使用键盘时从<select>执行$ resource调用的最佳方法</select>

Question

使用案例

使用下拉菜单控制资源选择可能很有用，但在更改事件期间可能会触发许多$resource次调用。添加ng-model-options: { debounce: 1000}将提供更加优化的解决方案。但是，当使用键盘向下按钮来控制<select>时，会出现以下问题。

1. 如果模型默认为null，则用户只能在null选项和第一个选项之间进行选择。
2. 选择第一个选项后，用户只能在第一个和第二个选项之间进行选择。
3. 选择第二个选项后，将返回正常行为，用户可以向下滚动列表。

奇怪的是，使用向上按钮没有问题。

问题

1. 有没有办法解决此问题或
2. 只有当用户停止从下拉菜单中选择一个选项时，是否有更好的方法来触发$resource来电？

环境

• Google Chrome
• AngularJS v1.3.0-beta.14

代码

jsFiddle

HTML

<select ng-model="item" 
    autofocus
    ng-options="item as item.name for item in items"
    ng-model-options="{debounce: 1000}"
    ng-change="test()">
</select>

控制器

function ctrl($scope) {
    $scope.item = null;
    $scope.items = [ 
        { name: 'duck' }, 
        { name: 'cow'}, 
        { name: 'poodle'} ];

    $scope.test = function() {
        // Resource call to service
        console.log("Changed!");
    };

    // initialize the array
    function ctor() {
        var randNames = [...];
        angular.forEach(randNames, function(item) {
            $scope.items.push({ name: item });
        });
    };

    ctor();
};

Answer 1

回答问题1：

是的，我在谷歌浏览器中遇到了同样的问题，但我发现Firefox没有问题（因为FF在用户点击返回之前不会更新选择值）。但是在Chrome中使用键盘时，我无法找到解决奇怪行为的方法。

回答问题2：

要获得仅在用户停止从下拉菜单中选择选项而不使用ng-model-options时触发$ resource调用的更好方法，请尝试使用$timeout并在模型上注册观察程序

var timeout;
$scope.$watch('item', function (newVal) {
    if (newVal) {
        if (timeout) $timeout.cancel(timeout);
        timeout = $timeout(function () {
            // Resource call to service
            console.log("Changed!");
        }, 1000);
    }
});

<强> DEMO FIDDLE