0

我在这里为我的问题设置了一个 jsfiddle 。基本上，我试图让用户通过动态构建与该组关联的选项表来生成 HTML 单选组。然后，我将所有这些选项存储在一个名为 的 Angular 模型中$scope.options，它是一个数组。每次将新行添加到选项表时，都会将一个新选项对象推送到选项数组中。很简单，真的。

问题是我的$scope.options模型在事件处理程序终止后没有立即更新。相反，它仅在触发另一个事件时更新。为了演示，请前往我的小提琴并在表格中添加 2 个选项。您将看到选项数量在添加选项 1 后不会改变，但在您开始添加选项 2 时会发生变化。

// add option to the table
$("#table-radio-options").on("click", "button.btn-confirm-option", function (event) {
    var $tr = $(this).closest("tr");
    var $optionText = $tr.find(".option-text").first();
    var $optionValue = $tr.find(".option-value").first();
    // add to the list of options in this scope
    $scope.options.push({
        text: $optionText.val(),
        value: $optionValue.val()
    });
    // change the form into table row with data value
    $optionText.replaceWith("<span>{0}</span>".format($optionText.val()));
    $optionValue.replaceWith("<span>{0}</span>".format($optionValue.val()));
    // remove the confirm 
    $(this).remove();
});

};

4

1 回答 1

2

如果您正在处理非角度方法，则需要在$apply()中进行 $scope 更改

// add option to the table
$("#table-radio-options").on("click", "button.btn-confirm-option", function (event) {
    var $tr = $(this).closest("tr");
    var $optionText = $tr.find(".option-text").first();
    var $optionValue = $tr.find(".option-value").first();

    //add this
    $scope.$apply(function(){
        // add to the list of options in this scope
        $scope.options.push({
            text: $optionText.val(),
            value: $optionValue.val()
        });
    })

    // change the form into table row with data value
    $optionText.replaceWith("<span>{0}</span>".format($optionText.val()));
    $optionValue.replaceWith("<span>{0}</span>".format($optionValue.val()));
    // remove the confirm 
    $(this).remove();
});
于 2013-10-14T03:38:29.847 回答