Сортировка для разделения Div с использованием ANGULARJS

0

Я новичок в угловом поле js и пытаюсь подобрать основы: у меня есть JSON, который я хочу отсортировать в 4 или 5 отдельных родительских divs в зависимости от значения в JSON, а затем JSON заполнить этот div с помощью информация о значениях. Какова наилучшая практика в ANGULAR, чтобы захватить эти данные и отсортировать их. Я понимаю манипуляцию дома в JQUERY, но как мне это сделать в угловом? Вот мой пример кода, который использует JQLITE: Пример:

//events is a predefined JSON loaded from API
angular.module('NerdCtrl', []).controller('NerdController', function($scope) {
        $scope.events = events;
    	for(var i = 0; i < events.length; i++)
			{
				var a = new Date(events[i].start.dateTime);
				if(a.getDay() == 2 )
        {
          angular.element( "#tuesday"    ).append(angular.element('card'+i));
        }
			}
    	});
<div class="ui container">
	    	<div class="ui grid">
	   		<div id="monday"class="two wide column">Monday</div>
	  		<div id="tuesday"class="two wide column">Tuesday</div>
	 		<div id="wednesday"class="two wide column">Wednesday</div>
	  		<div id="thursday"class="two wide column">Thursday</div>
	  		<div id="friday"class="two wide column">Friday</div>
			<div id="saturday"class="two wide column">Saturday</div>
			<div id="sunday"class="two wide column">Sunday</div>
	  	</div>
	</div>
     <div ng-repeat="x in events "class="ui cards ">

			<div class="card " id="card{{$index}}" >
			    <div class="content ">
			    	
			      	<div class="header">
			        	{{x.summary}}
			      	</div>
			      	<div class="meta">
			        	{{x.location}}
			      	</div>
			      	<div class="description">
			        	{{x.start.dateTime}}
			      	</div>
			    </div>
			    <div class="extra content">
			      	<div class="ui two buttons">
			        	<div class="ui basic green button">Approve</div>
			        	<div class="ui basic red button">Decline</div>
			      	</div>
			    </div>
			</div>
    </div>

Мне было интересно, был ли более эффективный способ сделать это, поскольку операции DOM будут дорогостоящими, и это похоже на работу.

  • 0
    почему бы вам не отсортировать их перед циклом ng-repeat?
  • 0
    Но если div уже существуют (то есть понедельник), как бы я вставил определенные части в этот div?
Теги:

1 ответ

0
Лучший ответ

Вы можете сделать это тремя способами -

  • Сортировка коллекции программно с orderBy фильтра orderBy
  • Сортировка коллекции на вашем шаблоне с orderBy фильтра orderBy (меньшая эффективность)
  • Сортировка коллекции каким-либо другим способом программно (возможно, array.prototype.sort)

Я показал метод № 2 здесь:

angular.module('myapp', [])
  .controller('NerdController', function NerdController($scope) {
    $scope.events = [{
      summary: 'asdasd',
      location: 'asda',
      start: {
        dateTime: 'Fri Oct 07 2016 11:43:37 GMT+0530 (IST)'
      }
    }, {
      summary: 'efgefg',
      location: 'efg',
      start: {
        dateTime: 'Fri Oct 06 2016 11:43:37 GMT+0530 (IST)'
      }
    }, {
      summary: 'werwer',
      location: 'wer',
      start: {
        dateTime: 'Fri Oct 09 2016 11:43:37 GMT+0530 (IST)'
      }
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="ui container">
  <div class="ui grid">
    <div id="monday" class="two wide column">Monday</div>
    <div id="tuesday" class="two wide column">Tuesday</div>
    <div id="wednesday" class="two wide column">Wednesday</div>
    <div id="thursday" class="two wide column">Thursday</div>
    <div id="friday" class="two wide column">Friday</div>
    <div id="saturday" class="two wide column">Saturday</div>
    <div id="sunday" class="two wide column">Sunday</div>
  </div>
</div>
<div ng-app="myapp" ng-controller="NerdController">
  <div ng-repeat="x in events | orderBy:'start.dateTime'" class="ui cards">

    <div class="card " id="card{{$index}}">
      <div class="content ">

        <div class="header">
          {{x.summary}}
        </div>
        <div class="meta">
          {{x.location}}
        </div>
        <div class="description">
          {{x.start.dateTime}}
        </div>
      </div>
      <div class="extra content">
        <div class="ui two buttons">
          <div class="ui basic green button">Approve</div>
          <div class="ui basic red button">Decline</div>
        </div>
      </div>
    </div>
  </div>
  </div>

Если вы хотите сделать это программно, вы можете сделать что-то вроде этого:

 $filter('orderBy')($scope.events, 'start.dateTime'); // Make sure you inject $filter into your controller

И сделайте простой ng-repeat на вашем шаблоне

Поделиться
  • 0
    Спасибо за ваш ответ! Я больше искал способ сортировки шаблона в отдельные элементы div. Например, если это в пятницу, оно будет ВНУТРИ пятничного дива.
  • 0
    Не могли бы вы разбить свои требования на шаги? На данный момент я понимаю, что сначала вы хотите отсортировать данные по времени, а затем вы хотите отобразить HTML-код, соответствующий отсортированному массиву. Что дальше?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню