![](/img/trans.png)
[英]NgModel isn't reflecting the selected value from a dropdown whose values get populated based on another dropdown
[英]Sorting of multiple rows (being populated from JSON) based on the select dropdown value selected
我有多行從JSON填充。 我正在使用每個循環進行迭代。我有一個帶有四個值的選擇下拉列表,其中一個是默認情況。 我想根據從下拉列表中選擇的值對行進行排序。例如 - 如果下拉值為'x',則使用JSON中的'y'鍵排序。當選擇默認值時,頁面應顯示為原樣。
jsonData.jsonArray.sort(function(a, b) {
if ($( "#custom-dropdown" ).val()=="Active") {
return (b.status> a.status) ? 1 : ((a.status< b.status) ? -1 : 0);
} else if ($( "#custom-dropdown" ).val()=="End date") {
return (b.endDate > a.endDate) ? 1 : ((b.endDate < a.endDate) ? -1 : 0);
} else if ($( "#custom-dropdown" ).val()=="Nearest end date"){
return (b.endDate > a.endDate) ? 1 : ((b.endDate < a.endDate) ? -1 : 0);
} else{
return 0;
}
});
JSON-
var jsonData={
"status": "200",
"jsonArray": [
{
"startDate": "2014-05-27",,
"status": "true",
"endDate": "2016-05-27",
},
{
"startDate": "2012-05-27",,
"status": "false",
"endDate": "2013-05-27",
}
]
選擇下拉結構 -
<div id="custom-dropdown">
<select class="selectpicker">
<option data-divider="true">Default</option>
<option data-divider="true">Active</option>
<option data-divider="true">End date</option>
<option data-divider="true">Nearest end date</option>
</select>
</div>
注意:如果選擇下拉值為活動,則按狀態排序。 2.當選擇的下拉值是結束日期時,則按結束日期按升序排序3.當下拉值接近結束日期時,則按結束日期降序排序。 4.當dropdon vale是默認值時,不應該進行排序
任何人都可以讓我知道我做錯了什么,因為頁面中沒有發生排序。
謝謝。
似乎對我有用。 這是一個示例小提琴,顯示了排序數據的簡單字符串。 我剛剛添加了一個觸發器,以便在下拉列表中的值更改時重新填充
$("#custom-dropdown").on("change", function() {
populate(this.value);
});
var jsonData = {
"status": "200",
"jsonArray": [{
"startDate": "2014-05-25",
"status": "true",
"endDate": "2016-05-25",
}, {
"startDate": "2012-05-26",
"status": "false",
"endDate": "2013-05-26",
},{
"startDate": "2014-05-27",
"status": "true",
"endDate": "2016-05-27",
}]
}
var json_sort = function() {
var newjsonArray = jsonData.jsonArray.slice(0);
var custom_dropdown = document.getElementById('custom-dropdown');
return newjsonArray.sort(function(a, b) {
switch (custom_dropdown.value) {
case 'Active':
return (b.status > a.status) ? 1 : ((a.status < b.status) ? -1 : 0);
break;
case "End date":
return (b.endDate < a.endDate) ? 1 : ((b.endDate > a.endDate) ? -1 : 0);
break;
case "Nearest end date":
return (b.endDate > a.endDate) ? 1 : ((b.endDate < a.endDate) ? -1 : 0);
break;
default:
return 0;
}
});
}
你有兩個錯誤,第一個是你使用的是同一個數組,所以你的默認條件總是會失敗。 記住Javascript總是通過引用傳遞。 所以我克隆了數組並返回。 在“結束日期”中的下一個條件,條件箭頭必須在相反的方向上以相反的方向排序。 休息排序工作正常。 Ckeckout這個工作jsfiddle: https ://jsfiddle.net/a9vsfrbx/8/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.