Javascript 使用Angular更新jQuery所选值_Javascript_Jquery_Angularjs_Jquery Chosen

Javascript 使用Angular更新jQuery所选值

javascript jquery angularjs

Javascript 使用Angular更新jQuery所选值,javascript,jquery,angularjs,jquery-chosen,Javascript,Jquery,Angularjs,Jquery Chosen,我正在尝试使用Angular将多个对象预先选择到jQuery Selected控件中。在这里查看我的Plunkr：数据设置为控制器中的模型，如下所示： $scope.valueTypes = [ { code: 'V1', name: 'Value 1', description: 'Description 1' }, { code: 'V3', name: 'Value 3', description: 'Description 3' } ]; 我选择的包装器指令如

我正在尝试使用Angular将多个对象预先选择到jQuery Selected控件中。在这里查看我的Plunkr：

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

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

$scope.getValueTypes=函数（）{
var valueTypes=[]；
对于（变量i=0；i<5；i++）{
valueTypes.push({
代码：'V'+i，
名称：'值'+i，
description:'description'+i
});
}
返回值类型；
};

但是，不会预先选择任何内容。如果切换到“选择列表”和“预选值”的字符串列表，则会正确预选值

那么，我如何才能使预选工作

谢谢

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

在我脑海中，我能想到两种可能的解决方案：

使用某种标识符而不是整个对象作为select的值

确保使用实际对象，而不是另一个恰好具有完全相同属性的对象

对于#1，将you

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

$scope.valueTypes=[]；
// ...
$scope.getValueTypes=函数（）{
var valueTypes=[]；
对于（变量i=0；i<5；i++）{
var obj={
代码：'V'+i，
名称：'值'+i，
description:'description'+i
};
值类型。推送（obj）；
如果（i==1 | | i==3）{//或其他什么
$scope.valueTypes.push（obj）；//现在它是同一个对象
}
}
返回值类型；
};