Javascript 滚动至ng repeat内阵列中最后添加的记录

我尝试实现滚动到最后添加的条目whithin ngRepeat指令

value="{{vehicle.Name}}"

我发现并调查了一些相关的SO问题：。但仍然无法解决问题

代码非常简单。 当用户向数组中添加新记录时，控制器会广播带有新添加项名称的“滚动事件”，然后指令接收该事件并滚动到列表中新添加的条目

<div ng-controller="MainCtrl">
    <input ng-model="newItem" ng-keydown="$event.which === 13 && addNewItem(newItem)"/>
        <button ng-click="addNewItem(newItem)">Add</button>

        <div id="items-list" scroll-to-new-item> 
            <div ng-repeat="item in items | orderBy: 'name'">
                <input ng-model="item.name" ng-readonly="true"/>
            </div>
        </div>
 </div>

app.controller("MainCtrl", function($scope){
    $scope.items = [
        {id: 1, name: "aaa"}, {id: 2, name: "bbb"},         
        {id: 3, name: "ccc"}, {id: 4, name: "ddd"},
        .......
    ];

    $scope.addNewItem = function(newItem){
        $scope.items.push({name: newItem});
        $scope.$broadcast('scroll-event', newItem);
        $scope.newItem = "";
    };
});

app.directive("scrollToNewItem", function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('scroll-event', function (event, newValue) {
                if(newValue){
                    var newItemHeightPosition = // !!! MY ISSUE HERE !!!
                    $('#items-list').animate({
                        scrollTop: newItemHeightPosition
                    }, 'slow');
                }
            });
        }
    };
});

但我不知道如何获得新添加项目的最高高度位置。我尝试了几种变体，但没有得到任何结果。例如，以下jquery选择器不起作用：

$('#items-list').find('input[value=' + newValue +']');
$('#items-list').find('input').eq(newValue);

请注意，数组是按字母顺序排序的，因此这会使任务复杂化

谁知道，如何解决这个问题

---

提前谢谢

我没有提出效率的理由，但除非您的列表编号在1000以内，否则我个人不介意这样使用.each（）

app.directive("scrollToNewItem", function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$on('scroll-event', function (event, newValue) {

                var newItemHeightPosition

                if (newValue) {
                    $('#items-list input').each(function () {
                        if ($(this).html().indexOf(newValue)) {
                            newItemHeightPosition = $(this).position().top;
                        }
                    })

                    $('#items-list').animate({
                        scrollTop: newItemHeightPosition
                    }, 'slow');
                }
            });
        }
    };
});

为了进一步解释，当您在自己的示例中编写

$('#items-list').find('input[value=' + newValue +']');

您正在做的是尝试选择一个dom元素，例如，它可能看起来像这样

<input type="submit" value="name">

---

但您的输入项实际上甚至没有值属性。取而代之的是，我对输入进行筛选，找到html中包含刚才添加的名称的输入。它并不完美，但它应该说明如何解决您的问题。

该代码中有两个问题

1） 第一个问题的原因是，

ngRepeat

指令在启动

scrollToNewItem

指令之前没有在repeat中呈现新添加的项

我已经通过在中包装DOM选择器修复了它。它提供了一个调用$scope.$apply的安全方法，并确保$digest循环已过。您可以在此处阅读更多详细信息：

2） 第二个问题与呈现的输入项没有任何包含属性的值有关。因此，由于这个原因，我找不到具有以下JQuery选择器的任何DOM项

$('#items-list').find('input[value=' + newValue +']')

我通过向input whithin ngRepeat指令添加一个附加属性

value

来修复它

value="{{vehicle.Name}}"

---

最后，我编辑的JSFiddle和您可以找到的工作示例。

您确定“$（'#项列表'）.find（'input[value='+newValue+'））；”没有写错吗？（'input[value='+newValue+']'）应该是（'input[value=“'+newValue+'']”）并正确使用“在道路的两边newValue@NachoDawg，没关系。还是不行，好吧。你能解释一下dom在附加一个项目后是什么样子的吗？newValue变量是items类吗？还是属性？@NachoDawg。这是输入值。你可以在我的JSFiddle@gbalduzzi中看到它。请仔细阅读我的问题。这不能解决我的问题。