通过不同的属性使用JavaScript

问题描述：

var homes = [ 
    { 
     "h_id": "3", 
     "city": "Dallas", 
     "state": "TX", 
     "zip": "75201", 
     "price": "162500", 
     "createdOn": "2015-08-31 00:35:14" 
    }, { 
     "h_id": "4", 
     "city": "Bevery Hills", 
     "state": "CA", 
     "zip": "90210", 
     "price": "319250", 
     "createdOn": "2015-08-31 14:35:14" 
    }, { 
     "h_id": "5", 
     "city": "New York", 
     "state": "NY", 
     "zip": "00010", 
     "price": "962500", 
     "createdOn": "2015-08-31 13:35:14" 
    } 
];

使用下面的JSON NG-重复我显示这一个div（h_id）。我知道如何使用排序依据排序排序。但在这里我有一个html选择dropdpwn list.On点击，我想按新到旧，旧到新，价格和h_id排序。

我如何创建一个JavaScript函数来获得这种类型的功能？

你想，如果选择价格其需要通过价格排序或按排序h_id的？ –

是的..如果我们选择价格，然后按价格排序，或者如果我们选择h_id按h_id排序，还有两个选项，newtoOld和oldtoNew。我们必须按这个排序 – varunaer

您可以参考以下网址http://www.jitendrazaa.com/blog/webtech/web/pagination-and-sorting-of-data-table-using-angularjs/ http：// stackoverflow .com/questions/26879066/custom-sorting-in-angularjs –

答

您可以使用array.sort函数并将它作为参数的比较函数。

ex。

homes.sort(function(l, r) { 
    return l.h_id - r.h_id; 
});

一些文档： http://www.w3schools.com/jsref/jsref_sort.asp

你可以有一个不同的每一种情况下比较功能，和排序根据用户选择

我不明白如何在ng-repeat中调用它.. – varunaer

啊抱歉没有意识到你正在使用角度：请参阅此处的文档：https：// docs orderBy orderBy将谓词函数作为第二个参数，将您的逻辑比较函数放在那里，当用户更改顺序时，以编程方式更改此逻辑比较函数。 – Simba

谢谢..测试它 – varunaer

答

尝试......

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<html> 
<head> 
    <script type="text/javascript"> 
var homes = [ 
    { 
     "h_id": "3", 
     "city": "Dallas", 
     "state": "TX", 
     "zip": "75201", 
     "price": "162500", 
     "createdOn": "2015-08-31 00:35:14" 
    }, { 
     "h_id": "1", 
     "city": "Bevery Hills", 
     "state": "CA", 
     "zip": "90210", 
     "price": "319250", 
     "createdOn": "2015-08-31 14:35:14" 
    }, { 
     "h_id": "5", 
     "city": "New York", 
     "state": "NY", 
     "zip": "00010", 
     "price": "1", 
     "createdOn": "2015-08-31 13:35:14" 
    } 
]; 
    function changeFunc() { 

    var selectBox = document.getElementById("selectBox"); 
    var selectedValue = selectBox.options[selectBox.selectedIndex].value.trim(); 
alert(selectedValue); 

var sort_by = function(field, reverse, primer){ 
    var key = function (x) {return primer ? primer(x[field]) : x[field]}; 

    return function (a,b) { 
     var A = key(a), B = key(b); 
     return ((A < B) ? -1 : ((A > B) ? 1 : 0)) * [-1,1][+!!reverse];     
    } 
} 

// Sort by price high to low 
homes.sort(sort_by(selectedValue, true)); 
var u1 = document.getElementById('u1'); 
$(".remove").remove(); 
for (var i=0; i<homes.length; i++) { 
    u1.innerHTML += '<li class="remove">- '+homes[i].price+', '+homes[i].city+'</li>'; 
} 

    } 

    </script> 
</head> 
<body> 
To sort or not to sort, that is the question. 
<h3>By price asc</h3> 
<ul id="u1" style="margin-bottom: 20px;"></ul> 

    <select id="selectBox" onchange="changeFunc();"> 
    <option>Select option</option> 
<option value="h_id">h_id</option> 
<option value="price">price</option> 
<option value="city">city</option> 
    </select> 
</body> 
</html>

演示：http://js.do/code/66972

答

选择你最好的排序算法中，并通过然后实现它自己的

var homes = [ 
    { 
     "h_id": "3", 
     "city": "Dallas", 
     "state": "TX", 
     "zip": "75201", 
     "price": "162500", 
     "createdOn": "2015-08-31 00:35:14" 
    }, { 
     "h_id": "4", 
     "city": "Bevery Hills", 
     "state": "CA", 
     "zip": "90210", 
     "price": "319250", 
     "createdOn": "2015-08-31 14:35:14" 
    }, { 
     "h_id": "5", 
     "city": "New York", 
     "state": "NY", 
     "zip": "00010", 
     "price": "962500", 
     "createdOn": "2015-08-31 13:35:14" 
    } 
]; 

var sortBy = 'price'; //define sortBy field on basis of field selected by use to be sort before calling sorting 
var orderBy = 'asc';// define sorting based on user selected field to sort either asc or dsc 

for (i=0; i<homes.length; i++) { 
    for(j=0; j<homes.length-i-1; j++) { 
    if (orderBy == 'asc') { 
     if (homes[j][sortBy] > homes[j+1][sortBy]) { 
      temp = homes[j]; 
      homes[j] = homes[j+1]; 
      homes[j+1] = temp; 
     } 
    } else { 
     if(homes[j][sortBy] < homes[j+1][sortBy]) { 
      temp = homes[j]; 
      homes[j] = homes[j+1]; 
      homes[j+1] = temp; 
     } 
    } 
    } 
} 
console.log(homes);

但请记住'100' < '9' will return true因为字符串检查

通过不同的属性使用JavaScript

相关推荐