Question

我正在使用selectiz.js尝试使用复选框实现Multiselect下拉列表。我可以在selectize中使用render选项自定义我的下拉列表。但是，如果我单击其中一个复选框，它将单击所有其他不需要的复选框。我知道这是因为所有选项都绑定到一个ng模型。我试图让它变得动态，但一切似乎都失败了。选择渲染选项。如果有人可以帮我解决这个问题，我将非常感激。我试图把最简单的版本放在这里。另请注意我在复选框中使用Icheck插件。

<html ng-app="checkBoxes">

<head>


<body ng-controller="selectizeDropdownCtrl">

  <h2 class="header">Multi Selelct</h2>
  <input id="dropdown" config="assigneeConfig" options="assigneesOptions" position="bottom" ng-model="model" selectize/>

</body>

"use strict";
 angular.module('checkBoxes')
.controller('selectizeDropdownCtrl',
    function ($rootScope, $scope, $compile) {

        //================================================================
        // Initialize Data
        //================================================================

        $scope.assigneesOptions = [
            {
                "id": "1",
                "name": "Mercury, Freddie"
            },
            {
                "id": "2",
                "name": "Morty, Rick"
            }
        ];



    $scope.assigneeConfig = {
            autoBind: true,
            valueField: 'id',
            labelField: 'name',
            maxItems: null,
            placeholder: 'Select...',
            render: {
                option: function (item, escape) {

                    var html= '<div class="option">' +
                        '<div class="uk-input-group">'+
                   '<span class="uk-input-group-addon"><input type="checkbox" ng-model= "checkboxesModel"  icheck/></span>'+
                   ' <span class="name">' + escape(item.name) + '</span>'++
                         '</div>';
                    return $compile(html)($scope)
                }
            },




        };


    });

无法使用angular-Selectize为Multiselect复选框定义动态ng模型

0 个答案: