current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I am new to the angular js field, and am trying to pick up the basics: I have a JSON that I want sorted into 4 or 5 separate parent divs depending on a value in the JSON, and then have the JSON fill this div with the values information. What is the best practice in ANGULAR to grab this data and sort it. I understand dom manipulation in JQUERY, but how should I do this in angular? Here is my sample code that uses JQLITE: Sample:

//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>

I was wondering if there was a more efficient way to do this as the DOM operations will be costly, and it feels like a work around.

share|improve this question
    
why don't you sort them before the ng-repeat loop? – madalin ivascu 18 hours ago
    
But if the divs are already in existence (ie monday) how would I insert certain portions into this div? – Luc-Olsthoorn 18 hours ago
up vote 0 down vote

You can do this in three ways -

  • Sort the collection programatically using the orderBy filter
  • Sort the collection on your template using orderBy filter (lesser efficiency)
  • Sort the collection some other way programatically (maybe an array.prototype.sort)

I've shown method #2 here:

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>

If you want to do it programatically, you can do something like this instead:

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

And do a plain ng-repeat on your template

share|improve this answer
    
Thanks for your response! I was looking more for a way to sort the template into separate divs. For example, if it is on friday it would go INSIDE the friday div. – Luc-Olsthoorn 9 hours ago
    
Could you break down you requirements into steps? What I understand so far is, first you want to sort your data by time, and then you want to render the HTML corresponding to the sorted array. What next? – nikjohn 9 hours ago
    
Then, and this is the essential part, if the data says that is on a monday, grab the rendered html and insert it into monday div. It would be like jquery append, but with angular. I want the generated html and div placement to be done in the same step if possible? The DOM operations of using jqlite with angular feels costly and wrong. Thanks for the help so far – Luc-Olsthoorn 8 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.