AngularJS - Как изменить порядок делений?

Question

AngularJS - Как изменить порядок делений?

0

Как изменить порядок элементов div, отображаемых в выбранном порядке? Я делаю свое приложение в AngularJS, поэтому приветствуются чистые ответы на JavaScript или углы.

Вот как выглядит мой 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

hazrmard 22 март 2016, в 04:20

Источник

Теги:

javascript

html

angularjs

3 ответа

0

Рабочий 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);

Khalid Hussain 22 март 2016, в 03:08

0

Расширяясь в ответе "Пробуждение байта", вы можете использовать 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>

Jaydo 22 март 2016, в 00:08

Ещё вопросы

Awakening Byte · Accepted Answer · 2016-03-21T23-39-00.000Z

Существует встроенный фильтр OrderBy для ng-repeat

в вашем контроллере

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

Благодарю. Тем не менее, содержание в каждом div не является идентичным. У каждого div есть отдельный html внутри. Так что ng-repeat не будет работать.
Тот факт, что вы ищете динамические средства для упорядочения контента, предполагает, что данные имеют некоторый общий упорядочиваемый аспект. Сначала определите это, затем выясните, как извлечь его, и это будет правильный ответ.