1

我有一个包含三个输入的列表,用户可以通过按下放置在它们左侧的红十字来删除每个输入。当用户删除一个输入时,将聚焦下一个输入并删除选中的复选框。直到那里到目前为止这么好。删除元素后,ng-repeat 循环遍历更新的模型,我失去了元素焦点。有什么办法可以防止这种情况发生吗?

非常感谢,

吉列尔莫

PD:包括指令代码以防万一。

directive('checkEmptyInput', function ($timeout,$q) {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if(!ngModel) return; //do nothing if no ng-model

            var idx = scope.$index,
                array = [],
                fieldIsValid = false;



            element.on('keyup', function () {


                switch (attrs.checkEmptyInput) {
                    case "method":
                        array = scope.album.tracks;

                        fieldIsValid = scope.ngAlbumForm.track.$valid;
                    break;
                }

                if(array[idx].name && array[idx].name != "" && fieldIsValid) {
                    array[idx].active = true;
                } else {
                    array[idx].active = false;


                    if(scope.elementHasId(array[idx])){
                        scope.deleteKeyFromCombinationsCodes(array[idx].id);
                    }
                };

                if (array[idx].name == "") {

                    //Previous to delete focus the next element
                    $timeout(function () {
                        var nextElem = element.parent().next().find('input')[0];

                        if(nextElem !== undefined) {

                            if(!scope.$last) {

                                //Delete the element
                                console.log("Deleting from inside the directive...");
                                nextElem.focus();                                   
                                scope.$emit("deleteArrayElement", [idx]);

                            }

                        }

                    });

                }

            });

        }
    }
})

HTML:

                    <div ng-repeat="track in album.tracks">
                        <input check-empty-input="track" type="text" ng-change="addInputText($index,$last,track.name,album.tracks;" ng-minlength="3" class="album_tracks" ng-model="track.name" ng-unique="track"/><button type="button"/>
                        <i class="remove-icon"></i>
                        </button>
                    </div>

Plunker:http ://plnkr.co/edit/BRN9csBcxHp5QU96NKq9?p=info

4

1 回答 1

1

Ah, I see with the plunk. ng-repeat re-uses elements and you pick the index during initial linking. If you set idx inside your keyup handler it works. (PLNKR)

element.on('keyup', function () {
    idx = scope.$index;
于 2013-10-15T21:41:30.137 回答