Jak najszybciej przypisać odpowiednie obiekty w odpowiednie komórki tablicy, za pomocą angulara?

0

Mam do stworzenia tabelę, gdzie kolumny to są daty, natomiast, wiersze to pracownicy.
Natomiast w komórkach mają się pokazywać pewne wydarzenia.
Te wydarzenia są to obiekty, które mają w sobie min. id pracownika, oraz datę.
W tej chwili robię to tak, że przechodzę dla każdego pracownika, każdy dzień, i w każdym dniu porównuję datę i id wydarzenia z tablicy tych wydarzeń, jeśli się zgadza to wtedy dzięki dyrektywie ng-if wsadzam diva do komórki. Wszystko ładnie działa, ale trwa to ze dwie - trzy sekundy przy raptem 8 pracownikach, 6 dniach i 30 wydarzeniach.
Czy da się to zrobić jakoś szybciej?

tabela:

<table class="calendar_table">
	<tr>
		<th>Pracownik:</th>
		<td ng-repeat="day in days"> {{ day.fullDate }} </td>
	</tr>
	<tr ng-repeat="person in persons">
		<th>{{person.Name}}</th>
		<td ng-repeat="day in days">
			<div ng-repeat="alloc in AllocationsList" ng-if="showEvent(alloc,day,person)">
				{{ alloc.info }}
			</div>
		</td>
	</tr>
</table>	

metoda sprawdzająca czy stworzyć diva:

$scope.showEvent = function (alloc, day, person) {
	if (alloc.DateTime.toString() === day.date.toString()) {
		if (alloc.UserId === person.Id) {
			return true;
		}
	}
	return false;
};
1

na początek zmień iterowanie przez AllocationsList, tzn zamiast używać dyrektywy ng-repeat dodaj pętle for po AllocationsList w funkcji showEvent, ng-repeat powoduje za każdym razem wstawienie elementu do drzewa DOM, a ng-if usunięcie go z DOM (jeśli false), stąd pewnie taki długi czas wykonywania

później można jeszcze pomyśleć z zoptymalizowaniu AllocationsList, np przez dodanie indeksu

0

Skąd wtedy html będzie wiedział, który alloc ma wyświetlić?
Poza tym jest taka możliwość, że w jednej komórce może być więcej niż jeden div.

0

daj jako jsfiddle wtedy bedzie latwiej cos poprawic

1

problematyczne jest użycie w jednym elemencie pary ng-repeat/ng-if, drugie rozwiązanie jakie przychodzi mi do głowy to zastąpienie ng-if filtrem:
http://stackoverflow.com/questions/16563018/custom-filters-and-ng-repeat-in-angularjs

0

jsfiddle:

https://jsfiddle.net/5Lpg6xdc/

@lhp pokminię nad filtrami, a co z tym pierwszym rozwiązaniem, ono wciąż jest możliwe? Aby przenieść pętlę do metody, ale aby przy tym wiadomo było, które alloc tam wyświetlić?

0

Zastosowałem filtry, pozbyłem się dzięki temu ng-if'a. Aby do końca to spełniało to co chciałem uzyskać, musiałem stworzyć własny filtr, wewnątrz którego przechodzę po całej liście i zwracam nową listę zawierającą tylko pożądane przeze mnie obiekty.

<div ng-repeat="alloc in AllocationsList | allocFilter:day:person">
	{{ alloc.Info }}
</div>
module.filter('allocFilter', function () {
    return function (allocationList, day, person) {
        var returnList = [];
        var j = 0;

        for (var i = 0; i < allocationList.length; i++) {
            var alloc = allocationList[i];
            
            if (alloc.DateTime.toString() === day.date.toString()) {
                if (alloc.UserId === person.Id) {
                    returnList[j] = alloc;
                    j++;
                }
            }
        }
        return returnList;
    }
});
0

Zdaje mi się, że tamten sposób już był szybszy, a ten na pewno.

Można sobie jednak poradzić bez własnego filtra:

ng-repeat="alloc in AllocationsList | filter:{UserId: person.Id}:true | filter: {DateTime: day.date}:true"

W każdym razie filtry są szybsze niż własna funkcja pod ng-if :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1