AngularJS - 如何改變divs的順序？

如何更改訂單div元素以給定的首選訂單顯示？我正在AngularJS中開發我的應用程序，因此歡迎使用純JavaScript或基於Angular的答案。AngularJS - 如何改變divs的順序？

這裏是我的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。

來源

2016-03-22 hazrmard

還有就是內置OrderBy濾波器NG重複

在控制器

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

來源

2016-03-22 02:26:32

謝謝。但是，每個「div」中的內容並不相同。每個'div'都有不同的html。所以'ng-repeat'不起作用。 – hazrmard

事實上，您正在尋求一種動態的方式來訂購內容，這表明數據具有一些常見的有序性方面。首先定義它，然後找出如何提取它，這將是正確的答案。 – jusopi

擴展在覺醒字節的回答，您可以使用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>

來源

2016-03-22 02:52:48 Jaydo

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

來源

2016-03-22 05:19:31

AngularJS - 如何改變divs的順序？

回答

相關問題