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

ProgramBox

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

Post author:admin
Запись опубликована:12 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #angularjs

#javascript #jquery #HTML #angularjs

Вопрос:

Я новичок в поле angular js и пытаюсь освоить основы: у меня есть JSON, который я хочу отсортировать по 4 или 5 отдельным родительским разделам в зависимости от значения в JSON, а затем пусть JSON заполнит этот раздел информацией о значениях. Какова наилучшая практика в ANGULAR для захвата этих данных и их сортировки. Я понимаю манипуляции с dom в JQUERY, но как мне это сделать в angular? Вот мой пример кода, который использует 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 будут дорогостоящими, и это похоже на обходной путь.

Ответ №1:

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

Сортируйте коллекцию программно, используя 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 в своем шаблоне

1. Спасибо за ваш ответ! Я больше искал способ сортировки шаблона по отдельным разделам. Например, если это в пятницу, это войдет В пятничный раздел.

2. Не могли бы вы разбить свои требования на этапы? Насколько я понимаю, сначала вы хотите отсортировать свои данные по времени, а затем вы хотите отобразить HTML, соответствующий отсортированному массиву. Что дальше?

3. Затем, и это важная часть, если данные говорят, что это в понедельник, возьмите отрисованный HTML-код и вставьте его в раздел monday div. Это было бы похоже на добавление jquery, но с angular. Я хочу, чтобы сгенерированное размещение html и div выполнялось на одном шаге, если это возможно? Операции DOM при использовании jqlite с angular кажутся дорогостоящими и неправильными. Спасибо за помощь до сих пор