Question

如何更改订单首选订单中显示的订单div元素？我正在AngularJS中创建我的应用程序，所以欢迎纯JavaScript或基于Angular的答案。

这是我的html的样子：

<div id="A">{{content for A}}</div>
<div id="B">{{content for B}}</div>
<div id="C">{{content for C}}</div>

在我的脚本中有一些描述首选顺序的变量：

orderOfA = 2;
orderOfB = 3;
orderOfC = 1;

我想渲染内容，例如，基于上述值，div的顺序为C，A，B。

Answer 1

ng-repeat

有一个内置的OrderBy过滤器控制器中的

$scope.values = [{"name": "valueA", order: 2}
  ,{"name": "valueB", order: 3}
  ,{"name": "valueC", order: 1} ]

在视图中

<div ng-repeat="value in values | orderBy: 'order'">
   {{value.name}}
</div>

Answer 2

扩展Awakening Byte的答案，您可以使用ngBindHtml来绑定HTML。

var app = angular.module('app', ['ngSanitize']);

app.controller("controller", function($scope) {
  $scope.elements = [
    {html: "<div id='A'>Div A</div>", order: 2},
    {html: "<div id='B'>Div B</div>", order: 3},
    {html: "<div id='C'>Div C</div>", order: 1}
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <div ng-repeat="elem in elements | orderBy:'order'" ng-bind-html="elem.html">
  </div>
</div>

Answer 3

Working Plnkr

<强> HTML

<div id="container">
      <div id="A">Content of A</div>
      <div id="B">Content of B</div>
      <div id="C">Content of C</div> 
 </div>

<强>的JavaScript

var orDerPrecedence = [{"A":2},{"B":3},{"C":1}];

   orDerPrecedence = orDerPrecedence.sort(function(a, b) {
       var valueOfA =  Object.keys(a).map(function(key){return a[key]})
       var valueOfB =  Object.keys(b).map(function(key){return b[key]})
       return (valueOfA > valueOfB ? 1 : (valueOfA < valueOfB) ? -1 : 0);

    });  
    var numericallyOrderedDivs = [];
    for(element in orDerPrecedence){
        numericallyOrderedDivs[numericallyOrderedDivs.length] = jQuery("#"+Object.keys(orDerPrecedence[element]));           
    }

    $("#container").html(numericallyOrderedDivs);

AngularJS - 如何改变div的顺序？

3 个答案: