Question

我有一个多选框，上面附有一个模型。 Here is a JSFiddle of my basic setup。正如您所看到的，一切都按预期工作 - 我的标签数据集中的值会自动显示在我的多个选择框中（已经使用jQuery Chosen制作了一个标记框）。

当我将标签数据的来源从硬编码转换为JS，再到通过API调用检索时，问题就出现了。

如果我使用以下代码替换myController内的所有内容，则仍会将正确的数据发送到视图，但它不再自动填充/选择多个选择中的项目。

var path = 'http://example.com/api/tags';
$http.get(path).success(function(data) {
    $scope.tags = data;

    $scope.createForm = {};
    $scope.createForm.tags = [];

    for(var i = 0; i < $scope.tags.length; i++)
    {
        $scope.createForm.tags[i] = $scope.tags[i].id;
    }
});

我从API调用中检索的数据格式与我对硬编码值完全相同。问题是什么？无论标签数据是硬编码还是从外部源加载，我都希望行为相同。

Answer 1

初始化后，您必须在模型更改时触发更新：

$(elem).trigger("chosen:updated");

在指令中注意模型的任何变化：

myApp.directive("ngChosen", function ($timeout) {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elem, attrs, ngModel) {

            scope.$watch(function () {
                return ngModel.$modelValue;
            }, function (newValue) {
                $timeout(function () {
                    // TRIGGER CHOSEN UPDATE
                    $(elem).trigger("chosen:updated");
                });
            }, true);

            // INIT CHOSEN
            $timeout(function () {
                $(elem).chosen({
                    width: "240px"
                });
            });
        }
    };
});

<强> DEMO

AngularJS多个选择框未填写

1 个答案: