如何在select drop中显示数组对象？

Question

我有一个数组对象，并且只在对象下方使用角度js在select标签中显示我的数组对象

"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
  }
]
};

这个对象我要如何在select标签中帮我解决这个问题。 在图片下方如何在UI中显示：

如果我选择标签，ng-model应显示如下格式

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

Answer 1

由于您有嵌套列表，因此必须使用ng-repeat两次，同时在deal-type-name属性中提供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>

Answer 2

您需要使用ng-options，因为您希望选择一个对象。请参阅ng-options的角度文档。

＆＃13;

＆＃13;

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
  }
]
}
};


});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;