Я инициализирую множественный выбор пользовательского интерфейса Kendo внутри контроллера AngularJS следующим образом:
.directive("docTypes", [function() {
const directive = {
restrict: "E",
scope: {
fieldName: "@",
hiddenFieldName: "@",
model: "=",
dataTypes: "=",
modelProperty: "@"
},
controller: "docTypesCtrl",
replace: false,
template: function(element, attrs) {
let model = "formData." + attrs.fieldName;
let ngValue = "formData." + attrs.fieldName;
let tmpl = "";
tmpl += "<div>";
tmpl += "<div class='demo-section k-content'>";
tmpl += " <select id=\"" + attrs.fieldName + "\" ng-model=\"" + model + "\" data-placeholder=\"Select DOC(s)...\" class=\"ng-pristine ng-untouched ng-valid\"></select>";
tmpl += "</div>";
tmpl += " <input type=\"hidden\" name=\"" + attrs.hiddenFieldName + "\" ng-value=\"arrayToCommaSeparatedString(" + ngValue + ")\" />";
tmpl += " <div>";
tmpl += " <button class=\"k-button\" id=\"selectAllDocTypes\" type=\"button\" ng-click=\"selectAllDocs()\">Select All</button>";
tmpl += " <button class=\"k-button\" id=\"deselectAllDocTypes\" type=\"button\" ng-click=\"deselectAllDocs()\">Deselect All</button>";
tmpl += " </div>";
tmpl += "</div>";
return tmpl;
}
};
return directive;
}])
(Примечание: шаблон сгенерирован таким образом из-за другой ошибки)
В моем контроллере я инициализирую множественный выбор и выбор / отмена выбора следующим образом:
.controller("docTypesCtrl", ["$scope", "$http", function($scope, $http ) {
initMultiSelect2();
function initMultiSelect2() {
$('#' + $scope.fieldName).kendoMultiSelect({
clearButton: false,
dataTextField: 'NAME',
dataValueField: 'DOC_TYPE',
dataSource: {
transport: {
read: {
cache: false,
dataType: 'json',
url: '/report/docs'
}
},
schema: {
type: 'json',
data: 'resultData',
model: {
Field1: { field: 'NAME', type: 'string'},
Field2: { field: 'DOC_TYPE', type: 'string'}
}
}
}
});
$scope.selectAllDocs = function() {
let jqMultiSelect = $("#" + $scope.fieldName);
let jqHidden = $("input[name=" + $scope.hiddenFieldName + "]");
const required = jqMultiSelect.kendoMultiSelect().data("kendoMultiSelect");
const values = $.map(required.dataSource.data(), function(dataItem) {
return dataItem.value;
});
required.value(values);
const hiddenValues = values.join(",");
const jqHiddenFieldName = "input[name=" + $scope.hiddenFieldName + "]";
jqHidden.val(hiddenValues);
};
$scope.deselectAllDocs = function() {
let jqMultiSelect = $("#" + $scope.fieldName);
let jqHidden = $("input[name='" + $scope.hiddenFieldName + "'][type='hidden']");
let required = jqMultiSelect.kendoMultiSelect().data("kendoMultiSelect");
required.value([]);
console.log("taglist: " + JSON.stringify(required.tagList));
const jqHiddenFieldName = "input[name=" + $scope.hiddenFieldName + "][type='hidden']";
jqHidden.val("");
};
}
К сожалению, нажатие кнопки отмены выбора имеет неприятный побочный эффект добавления нового, «пустого» элемента управления внутри старого контроль, вместо (я полагаю) замены его. Когда контроллер инициализируется и отображается, я сомневаюсь, что это проблема с AngularJS.
Кто-нибудь может помочь?