使用Angular更新jQuery Chosen选定的值

Update jQuery Chosen selected values with Angular

本文关键字：Chosen Angular 更新 jQuery 使用      更新时间：2023-09-26

我正在尝试使用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;
};

但是，不会预先选择任何内容。如果切换到我的选择列表和预选值的字符串列表，则这些值将被正确地预选。

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

谢谢！

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

我脑海中浮现出两种可能的解决方案：

  1. 使用某种标识符而不是整个对象作为select的值
  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;
};

引用angular select文档

ngModel通过参考进行比较，而不是数值

您的ng-model引用的是$scope.valueTypes，但您的ng-repeat引用的是函数$scope.getValueTypes的结果。要想得到更详细的解释，请看一下这个小提琴（它也是来自角度文档，而不是我的作品=）

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

相关文章：