Question

我正在尝试使用Angular将多个对象预先选择到jQuery Chosen控件中。在这里查看我的Plunkr：http://plnkr.co/FNlTAcILnoeyjZat1tH1

数据在我的控制器中设置为模型，如下所示：

 $scope.valueTypes = [
     { code: 'V1', name: 'Value 1', description: 'Description 1' },
     { code: 'V3', name: 'Value 3', description: 'Description 3' }
 ];

我选择的包装器指令如下所示：

.directive('myChosen', ['$log', function ($log) {
    return {
        link: function (scope, element, attrs) {
            var model = attrs.ngModel;
            if (model !== null) {
                scope.$watch(model, function (data) {
                    $log.info('Model updated: ' + angular.toJson(data));
                    element.trigger('chosen:updated');
                });
            }

            element.chosen();
        },
        require: 'ngModel',
        restrict: 'A'
    };
}])

并使用如下：

<select id="valueType" name="valueType" class="form-control chosen-select" ng-options="valueType as valueType.code + ' - ' + valueType.name for valueType in getValueTypes()" ng-model="valueTypes" multiple="" my-chosen ng-required="true">

getValueTypes（）返回一个对象列表：

$scope.getValueTypes = function () {
    var valueTypes = [];
    for (var i = 0; i < 5; i ++) {
        valueTypes.push({
           code: 'V' + i,
           name: 'Value ' + i,
           description: 'Description ' + i
        });
    }
    return valueTypes;
};

但是，没有预先选择。如果我切换到我的选择列表和预选值的字符串列表，则会正确预选值。

那么，我如何进行预选工作呢？

谢谢！

Answer 1

问题是Angular正在使用对象引用相等来决定是否选择了一个选项。

我能想到两个可能的解决方案：

使用某种标识符而不是整个对象作为select
确保使用实际对象而不是恰好具有完全相同属性的其他对象

对于＃1，将ng-options属性更改为如下所示：

valueType.code as valueType.code + ' - ' + valueType.name for valueType in getValueTypes()

（注意开头的valueType.code而不是valueType）

对于＃2，在这种情况下，您需要更改初始化代码，但我怀疑在＆＃34;真实＆＃34;应用程序，您可能需要更改填充值的方式：

$scope.valueTypes = [];
// ...
$scope.getValueTypes = function () {
    var valueTypes = [];
    for (var i = 0; i < 5; i ++) {
        var obj = {
           code: 'V' + i,
           name: 'Value ' + i,
           description: 'Description ' + i
        };
        valueTypes.push(obj);
        if (i == 1 || i == 3) { // or whatever
            $scope.valueTypes.push(obj); // now it's the same object
        }
    }
    return valueTypes;
};

Answer 2

引自angular select documentation

ngModel按引用进行比较，而不是值

您的ng-model引用了$scope.valueTypes，但ng-repeat引用了您的函数$scope.getValueTypes的结果。对于更详细的explenation，请看一下这个fiddle（它来自角度文档，而不是我的工作=））

希望我能帮助一点，祝你好运！

使用Angular更新jQuery选择的选定值

2 个答案: