Question

我试图拼接一个数组，以便从我的数组中删除一个对象。我使用angular-formly来显示表单和AngularJs和JQuery以便处理数据。

JQuery

$(document).on("click", ".delete-me", function () {
    var id = $(this).parent().find('input, select, textarea').attr('id');
    var splitid = id.split("_")[3];
    angular.element(document.getElementById('View2Ctrl')).scope().removeField(splitid);
    $(this).closest('.formly-field').remove();
});

分裂的原因是形式包装了一个像 formly_1_input_textField-1_0 的id。

角度功能

 $scope.removeField = function (id) {
        for(var i=0;i<$scope.formFields.length;i++){

            if($scope.formFields[i].key == id){

                $scope.formFields.splice(id, 1);

                console.log($scope.formFields.length);

                $scope.currentId = i;
            }
        }
    };

控制台日志显示数组的实际长度，但我在模板上有{{formFields.length}}并且它没有更新，以及{{formFields}}仍然显示数组中的数据。我怀疑JQuery更新DOM并没有被Angular监视并尝试调用$ scope。$ apply（）手动无效。

Answer 1

您的功能中存在一些逻辑错误：

当您从数组中删除某个项目时，无论如何都会增加i，这意味着如果它匹配，您将错过下一个项目。
您在id

i

splice

第二个可能是罪魁祸首，但是一旦你修复了它，第一个就会咬你（除非id值是唯一的，顾名思义;在这种情况下，你应该终止找到它的循环。）

更新

$scope.removeField = function (id) {
    var i=0;
    while (i<$scope.formFields.length){          // Use a while loop

        if($scope.formFields[i].key == id){

            $scope.formFields.splice(i, 1);      // Use i, not id

            console.log($scope.formFields.length);

            $scope.currentId = i;

            // DON'T increment i here, you've removed the element

            // Or if IDs are unique, just terminate the loop
        } else {
            ++i;
        }
    }
};

使用JQuery时数组不更新

1 个答案: