Question

我是角度js领域的新手，我正在努力学习基础知识：我有一个JSON，我希望根据JSON中的值分为4或5个单独的父div，然后让JSON用值信息填充此div。 ANGULAR中获取此数据并对其进行排序的最佳做法是什么。我理解JQUERY中的dom操作，但是我应该怎么做角度？这是我使用JQLITE的示例代码：样品：

＆＃13;

//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));
        }
			}
    	});

＆＃13;

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

＆＃13;

我想知道是否有更有效的方法来执行此操作，因为DOM操作成本很高，而且感觉就像是一种解决方法。

Answer 1

您可以通过三种方式完成此操作 -

使用orderBy过滤器
使用orderBy过滤器（效率较低）
以编程方式（可能是array.prototype.sort）

我在这里显示了方法＃2：

＆＃13;

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)'
      }
    }];
  });

＆＃13;

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

＆＃13;

如果您想以编程方式执行此操作，则可以执行以下操作：

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

在模板上做一个简单的ng-repeat

使用ANGULARJS对Divs进行排序

1 个答案: