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

Question

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

数据在我的 Controller 中设置为模型，如下所示:

 $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 使用对象引用相等性来决定是否选择了一个选项。

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

1. 使用某种标识符而不是整个对象作为选择的值
2. 确保使用实际对象而不是恰好具有完全相同属性的另一个对象

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

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

(注意开头的 valueType.code 而不是只有 valueType)

对于 #2，在这种情况下，您需要更改初始化代码，但我怀疑在“真实”应用程序中，您可能需要更改填充值的方式:

$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;
};