Home » Javascript » angularjs multiselect table not redrow

angularjs multiselect table not redrow

Posted by: admin August 19, 2018 Leave a comment

Questions:

I’m using this https://github.com/Fabianlindfors/multi.js to create multi select table.
In my application I need to redraw this element without reloading whole site.
The source data im getting from http respone.
The employee list is redrawing when i update the category list but the student list not..
But when i clicked on the multi select object then this will redraw.
Data in listOfStudents is changing property and then im trying to build that multiselect again.

'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>
Answers: