Question

我正在使用ng-repeat来显示有序列表。我在列表中有一个输入，您可以在其中指定订单。当你改变它时，有时候它会保持聚焦（当输入变低时）但是当输入被分类时，我会把注意力放在输入上。我该如何解决这个问题？

<div ng-app ng-controller="MyCtrl">
    <div ng-repeat='person in Persons | orderBy: "number" track by person.id'>
        <p>{{ person.name }} <input type='number' ng-model='person.number'></p>
    </div>
</div>

Answer 1

更通用的方法：

app.directive("keepFocus", ['$timeout', function ($timeout) {
    /*
    Intended use:
        <input keep-focus ng-model='someModel.value'></input>
    */
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, $element, attrs, ngModel) {

            ngModel.$parsers.unshift(function (value) {
                $timeout(function () {
                    $element[0].focus();
                });
                return value;
            });

        }
    };
}])

然后只是：

<input keep-focus ng-model="person.number"/>

Answer 2

我认为这是由于在订单更改时如何重新创建DOM元素。我创建了一个将保持焦点的指令。我不确定这是不是最好的方式，但它确实有效。

app.directive('setFocus', function($timeout, $rootScope) {
    return {
        restrict: 'A',
        scope: {
            personId: '@',
            index: '@',
            selectedPersonId: '@'
        },
        link: function($scope, $element, attrs) {
            $scope.$watch("index", function(currentValue, previousValue) {
                if($scope.personId == $scope.selectedPersonId)
                {
                    $timeout(function(){
                        $element[0].focus();
                    });
                }
            })
        }
    }
});

您在元素的personId，元素的索引和selectedPersonId（无论哪个具有焦点）中传递它。它监视索引更改的发生，然后检查元素的personId是否等于selectedPersonId（如果是则设置焦点）。

HTML看起来像这样：

<input class='filter' type='number' ng-model='person.number' ng-focus="selectPerson(person.id)" set-focus person-id="{{person.id}}" selected-person-id="{{selectedPersonId}}" index="{{$index}}">

看起来似乎有很多额外的东西可以做一些看似简单的事情。也许其他人有更聪明的方式。

这里是Fiddle。

Angular ng-repeat：在订单更改时保持焦点输入

2 个答案: