Question

我在容器中有3个div，在我的CMS工具中可以灵活地创建或更新3 div将放置在容器中的位置。当页面加载时，我需要根据创建的数据属性值按升序对3个div进行排序。

例如，我可以按以下顺序更新位置，并且在加载页面时需要按升序排序。

<div class="container">
     <div data-pos="2">Content</div>
     <div data-pos="3">Content</div>
     <div data-pos="1">Content</div>
</div>

我需要根据数据属性

按如下方式排序

<div class="container">
     <div data-pos="1">Content</div>
     <div data-pos="2">Content</div>
     <div data-pos="3">Content</div>
</div>

我需要在angularJS中实现这一点。我已经看到很多这样的例子在javascript / jQuery中完成，但在angularJS中没有。

Answer 1

我通过创建一个自定义指令克服了这个问题，如下所示，排序工作正常，

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script type="text/javascript">
    
    var myApp = angular.module('myApp', []);
    
    myApp.directive('customsort', function () {       
        return {
        	restrict: 'A',
    		link: cutomSorting
            }
    		function cutomSorting(scope, element, attrs, controller) {
    			
    			if(attrs.customsort == "second")
    			{				
    				var firstElement = document.querySelector("[customsort='first']");
    				element.parent()[0].insertBefore(firstElement, element[0]);								
    			}
    			if(attrs.customsort == "third")
    			{
    				var SecondElement = document.querySelector("[customsort='second']");
    				element.parent()[0].insertBefore(SecondElement, element[0]);								
    			}
    		}
        
    });
    </script>
    </head>
    <body  ng-app="myApp">
    
    <div class="container" >
    	<div customsort="third">Content ABC</div>
    	<div customsort="second">Content DEF</div>
        <div customsort="first">Content XYZ</div>
    </div>
    
    </body>
    </html>

使用数据属性对div进行排序

1 个答案: