如何在選擇放置中顯示數組對象？

Question

我有一個數組對象，並在採用了棱角分明的js僅低於對象選擇標籤顯示是我的數組對象

"matcherObject": { 
"Percentage Off": [ 
    { 
    "dealType": "Percentage Off", 
    "subCategory": "16% to 20%", 
    "recid": 2 
    }, 
    { 
    "dealType": "Percentage Off", 
    "subCategory": "10 to 15 %", 
    "recid": 1 
    }, 
    { 
    "dealType": "Percentage Off", 
    "subCategory": "21% to 25%", 
    "recid": 3 
    } 
], 
"Special Deals based on the event": [ 
    { 
    "dealType": "Special Deals based on the event", 
    "subCategory": "Buy 1 get one entr", 
    "recid": 52 
    }, 
    { 
    "dealType": "Special Deals based on the event", 
    "subCategory": "Buy 1 get one entr", 
    "recid": 54 
    } 
] 
}; 

這個對象我要如何選擇標籤，請幫我解決這個問題。 圖像如何在用戶界面顯示如下圖：

如果我選擇標記的NG-模型應該如下格式顯示如下

{"dealType": "Percentage Off","subCategory": "16% to 20%","recid": 2} 

Answer 1

需要，因爲你要選擇的對象使用NG選項。請參閱ng-options的角度文檔。

var app = angular.module("App", []); 
 
app.controller("Ctrl", function($scope){ 
 
$scope.reqObj =  {"matcherObject": { 
 
"Percentage Off": [ 
 
    { 
 
    "dealType": "Percentage Off", 
 
    "subCategory": "16% to 20%", 
 
    "recid": 2 
 
    }, 
 
    { 
 
    "dealType": "Percentage Off", 
 
    "subCategory": "10 to 15 %", 
 
    "recid": 1 
 
    }, 
 
    { 
 
    "dealType": "Percentage Off", 
 
    "subCategory": "21% to 25%", 
 
    "recid": 3 
 
    } 
 
], 
 
"Special Deals based on the event": [ 
 
    { 
 
    "dealType": "Special Deals based on the event", 
 
    "subCategory": "Buy 1 get one entr", 
 
    "recid": 52 
 
    }, 
 
    { 
 
    "dealType": "Special Deals based on the event", 
 
    "subCategory": "Buy 1 get one entr", 
 
    "recid": 54 
 
    } 
 
] 
 
} 
 
}; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="App" data-ng-controller="Ctrl"> 
 
<select data-ng-model = "selOption" data-ng-options="perc as perc.subCategory for perc in reqObj.matcherObject['Percentage Off']"> 
 
</select> 
 

 
<hr /> 
 

 

 
{{ selOption | json }} 
 
</div>

Answer 2

既然你已經嵌套的列表，你必須使用ng-repeat兩次，也給在name屬性，以便您可以顯示它。

我改變了一點：

$scope.matcherObject = [{ 
    "listName": "Percentage Off", 
    "items": [{ 
     "dealType": "Percentage Off", 
     "subCategory": "16% to 20%", 
     "recid": 2 
    }, { 
     "dealType": "Percentage Off", 
     "subCategory": "10 to 15 %", 
     "recid": 1 
    }, { 
     "dealType": "Percentage Off", 
     "subCategory": "21% to 25%", 
     "recid": 3 
    }], 
    }, { 
    "listName": "Special Deals based on the event", 
    "items": [{ 
     "dealType": "Special Deals based on the event", 
     "subCategory": "Buy 1 get one entr", 
     "recid": 52 
    }, { 
     "dealType": "Special Deals based on the event", 
     "subCategory": "Buy 1 get one entr", 
     "recid": 54 
    }] 
    }] 

HTML

<ul ng-repeat="listItem in matcherObject" > 
    {{listItem.listName}} 
    <li ng-repeat="item in listItem.items"> 
     {{item.subCategory}} 
    </li> 
</ul> 

檢查工作示例這裏：Plnkr

EDIT1：

下面的代碼將做你的工作全無改變腳本：

<ul ng-repeat="listItem in matcherObject"> 
    <li ng-repeat="item in listItem"> 
     <ul> 
     <li ng-repeat="subItem in item"> 
      {{subItem.subCategory}} 
     </li> 
     </ul> 
    </li> 
</ul>