我使用此https://github.com/Fabianlindfors/multi.js创建多选表。 在我的应用程序中，我需要重新绘制此元素而不重新加载整个站点。 源数据我来自http respone。 当我更新类别列表但是学生列表没有时，员工列表正在重新绘制。 但是当我点击多选对象时，这将重绘。 listOfStudents中的数据正在更改属性，然后我尝试再次构建多次选择。
'use strict';
angular.module('myApp.viewAddTheoryLesson', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/viewaddtheorylesson', {
templateUrl: 'viewAddTheoryLesson/viewAddTheoryLesson.html',
controller: 'ViewAddTheoryLessonCtrl'
});
}])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
})
.controller('ViewAddTheoryLessonCtrl', ['$http', '$scope', 'AuthService','$window', '$location', '$route','$rootScope', function ($http, $scope, AuthService, $window, $location, $route,$rootScope) {
var self = this;
var URL = 'http://localhost:8080';
$scope.listOfStudents = [];
this.listOfEmployee = [];
this.listOfCategories = [];
this.theoryLesson = {
"employeeId": "",
"categoryId": "",
"dateDay": "",
"dateStart": "",
"dateEnd": "",
"studentIds": [],
};
this.select_element = document.getElementById('selectStudent');
this.categoryChange = function(){
$http.get(URL + '/employee/bypermission?categoryid=' + self.theoryLesson.categoryId)
.then(function (data) {
var array = data.data;
self.listOfEmployee = [];
for (var channel in array) {
if (array[channel].id) {
self.listOfEmployee.push(array[channel]);
}
}
},function (data) {
console.log(data);
alertify.error("Nie udało się pobrać listy instruktorów.");
});
self.getStudentsByCategory();
self.createMultiSelectTable();
};
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
self.createMultiSelectTable();
});
this.createMultiSelectTable = function () {
multi( self.select_element, {
'enable_search': true,
'search_placeholder': 'Wyszukaj...',
'non_selected_header': 'Kursanci',
'selected_header': 'Wybrani'
});
};
this.getStudentsByCategory = function () {
$http.get(URL + '/student/getallbycategory?categoryid=' + self.theoryLesson.categoryId)
.then(function (data) {
var array = data.data;
$scope.listOfStudents = [];
for (var channel in array) {
if (array[channel].id) {
$scope.listOfStudents.push(array[channel]);
}
}
console.log($scope.listOfStudents);
},function (data) {
console.log(data);
alertify.error("Nie udało się pobrać listy kategorii.");
})
};
this.fillCategories = function () {
$http.get(URL + "/category/getall")
.then(function (data) {
console.log(data.data);
var array = data.data;
self.listOfCategories = [];
for (var channel in array) {
if (array[channel].id) {
self.listOfCategories.push(array[channel]);
}
}
},function (data) {
console.log(data);
alertify.error("Nie udało się pobrać listy kategorii.");
});
};
self.fillCategories();
this.fillStudents = function () {
$http.get(URL + "/student/getall")
.then(function (data) {
var array = data.data;
$scope.listOfStudents = [];
for (var channel in array) {
if (array[channel].id) {
$scope.listOfStudents.push(array[channel]);
}
}
}, function (data) {
console.log(data);
alertify.error("Nie udało się pobrać listy kursantów.");
});
};
self.fillStudents();
this.fillEmployees = function () {
$http.get(URL + "/employee/getall")
.then(function (data) {
var array = data.data;
self.listOfEmployee = [];
for (var channel in array) {
if (array[channel].id) {
self.listOfEmployee.push(array[channel]);
}
}
}, function (data) {
console.log(data);
alertify.error("Nie udało się pobrać listy instruktorów.");
});
};
self.fillEmployees();
this.addTheoryLesson = function () {
if(!self.theoryLesson.employeeId.toString().length > 0){
alertify.error('Pole instruktor nie może być puste');
return;
}
if(!self.theoryLesson.categoryId.toString().length > 0){
alertify.error('Pole kategoria nie może być puste');
return;
}
if(self.theoryLesson.studentIds == ''){
alertify.error('Proszę wybrać przynajmniej jednego kursanta');
return;
}
if(self.theoryLesson.dateDay == ''){
alertify.error('Proszę wybrać dzień');
return;
}
if(self.theoryLesson.dateStart == ''){
alertify.error('Proszę wybrać godzinę rozpoczęcia');
return;
}
if(self.theoryLesson.dateEnd == ''){
alertify.error('Proszę wybrać godzinę zakończenia');
return;
}
if(self.theoryLesson.dateStart > self.theoryLesson.dateEnd){
alertify.error('Data rozpoczęcia nie może być późniejsza niż data zakończenia');
return;
}
if(self.theoryLesson.dateStart == self.theoryLesson.dateEnd){
alertify.error('Data rozpoczęcia oraz data zakończenia są identyczne');
return;
}
console.log(self.theoryLesson);
$http.post(URL + '/theoreticallesson/add', self.theoryLesson)
.then(function (data) {
alertify.success("Dodano wykłady");
self.theoryLesson = {};
},function (data) {
console.log(data);
alertify.error(data.data.message);
})
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="ViewAddTheoryLessonCtrl as ctrl">
<form class="form-horizontal col-md-7" style="width: 900px" ng-submit="ctrl.addTheoryLesson()">
<fieldset>
<!-- Form Name -->
<legend>DODAJ WYKŁAD</legend>
<div class="form-group ">
<label class="col-md-3 control-label " for="selectEmployee">Kategoria:</label>
<div class="col-md-1" style="margin-left: -13px"></div>
<select ng-change ="ctrl.categoryChange()" ng-model="ctrl.theoryLesson.categoryId" class="col-md-3" id="select" name="select">
<option ng-repeat="element in ctrl.listOfCategories" value="{{element.id}}">
{{element.category}}
</option>
</select>
</div>
<div class="form-group ">
<label class="col-md-3 control-label " for="selectEmployee">Instruktor:</label>
<div class="col-md-1" style="margin-left: -13px"></div>
<select ng-model="ctrl.theoryLesson.employeeId" class="col-md-6" id="selectEmployee" name="selectEmployee">
<option ng-repeat="element in ctrl.listOfEmployee" value="{{element.id}}">
{{element.name}} {{element.surname}}
</option>
</select>
</div>
<div class="form-group col-md-11">
<div class="col-md-1" style="margin-left: -13px"></div>
<select ng-model="ctrl.theoryLesson.studentIds" multiple="multiple" name="Programming-Languages" id="selectStudent">
<option ng-repeat="element in listOfStudents" value="{{element.id}}" on-finish-render="ngRepeatFinished">
{{element.name}} {{element.surname}}
</option>
</select>
</div>
<div class="form-group ">
<label class="col-md-3 control-label " for="selactDate">Dzień:</label>
<div class="col-md-1" style="margin-left: -13px"></div>
<div class="input-group col-md-6" id="selactDate" moment-picker="ctrl.theoryLesson.dateDay" format="DD/MM/YYYY">
<i class="far fa-calendar-alt" style="margin-top: 8px; margin-right: 3px;"></i>
<input class="form-control" placeholder="wybierz datę.." id="date-input" ng-model="ctrl.theoryLesson.dateDay" ng-model-options="{ updateOn: 'blur' }">
</div>
</div>
<div class="form-group ">
<label class="col-md-3 control-label " for="selectStart">Rozpoczęcie:</label>
<div class="col-md-1" style="margin-left: -13px"></div>
<div class="input-group col-md-6" id="selectStart" moment-picker="ctrl.theoryLesson.dateStart" format="HH:mm" show-header="false">
<i class="far fa-calendar-alt" style="margin-top: 8px; margin-right: 3px;"></i>
<input class="form-control" placeholder="wybierz godzinę.." id="startdate-input" ng-model="ctrl.theoryLesson.dateStart" ng-model-options="{ updateOn: 'blur' }">
</div>
</div>
<div class="form-group ">
<label class="col-md-3 control-label " for="selectEnd">Zakończenie:</label>
<div class="col-md-1" style="margin-left: -13px"></div>
<div class="input-group col-md-6" id="selectEnd" moment-picker="ctrl.theoryLesson.dateEnd" format="HH:mm" show-header="false">
<i class="far fa-calendar-alt" style="margin-top: 8px; margin-right: 3px;"></i>
<input class="form-control" placeholder="wybierz godzinę.." id="enddate-input" ng-model="ctrl.theoryLesson.dateEnd" ng-model-options="{ updateOn: 'blur' }">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-8 control-label" for="addCar"></label>
<div class="col-md-4">
<button style="margin-left: -15px" id="addCar" type="submit" name="addCar" class="btn btn-primary">Dodaj</button>
</div>
</div>
</fieldset>
</form>
</div>