Question

我正在尝试集成angularjs和jquery选择的插件，一切正常但是当更改时模型没有得到更新可以有人告诉我如何去做这个，有一个视频在youtube上解释相同，但我不有权访问youtube，任何帮助将受到高度赞赏

这是我的HTML代码：

<select id="categories" data-placeholder="Select Categories" 
    chosen="categories" ng-model="categoriesSelected" multiple="" 
    ng-options="category.name for category in categories"></select>
<div ng-repeat="category in categoriesSelected">{{category.name}}</div>

这是角度代码：

app.directive('chosen', function()
{
    return {
        restrict : 'A',
        link : function(scope, element, attr)
        {
            console.log(attr);

            $("#" + attr.id).chosen();

            scope.$watch(attr.chosen, function(oldVal, newVal)
            {
                $("#" + attr.id).trigger('chosen:updated');
            });

            scope.$watch(attr.ngModel, function()
            {
                $("#" + attr.id).trigger('chosen:updated');
            });

        }
    };
})

app.controller("workbenchController", function($scope, $http, workbenchService)
{
    $scope.categories = [];
    $scope.categoriesSelected = [];
    workbenchService.categoriesList().then(function(data)
    {
        $scope.categories = data;
    })
}

Answer 1

原因可能是jquery插件在编译角度应用程序后进行DOM修改，这意味着角度应用程序将无法将该元素用作应用程序的一部分（无ng-model，ng-show等对于那个元素），因为这个原因你必须尝试不使用jquery插件，但角度指令，指令将沿着应用程序编译，你将使一切按预期工作。

对您的问题更好的方法是使用ui-select指令，这是一个角度原生选择框，可以像选择，选择或选择2一样工作，更多信息和下载Here

和一个有效的例子Here

Answer 2

问题出在您的控制器中：

app.controller("workbenchController", function($scope, $http, workbenchService)
{
    $scope.data = {};
    $scope.data.categories = [];
    $scope.data.categoriesSelected = [];

    workbenchService.data.categoriesList().then(function(data)
    {
        $scope.data.categories = data;
    })
}

所以你Html必须指向：

<select id="categories" data-placeholder="Select Categories" 
    chosen="categories" ng-model="data.categoriesSelected" multiple="" 
    ng-options="category.name for category in categories"></select>
<div ng-repeat="category in data.categoriesSelected">{{category.name}}</div>

请阅读此内容：Understanding scopes

angularjs模型在选择更改时不会更新

2 个答案: