AngularJS 选择对象数组上的 ng-options

蜻蜓

我的数据如下所示:

  {
    "count": 0,
    "QHPIssuerNames": [
        "NOV BCBS",
        "mark issuer",
        "Release 3 issuer",
        "Los angles issuer"
     ],
    "QDPIssuerNames": [
        New One",
        "jan issuer",
        "Manage Issuer",
        "test enrollment",
        "testing issuer p"
    ]
}

我想在我的 html 中添加一个选择,从数组中加载数据。

<select 
    name="issuer" 
    id="issuer"
    ng-init="vm.selectedData = vm.inputData.issuer[0]" 
    class="form-control" 
    ng-model="vm.inputData.issuer"
    ng-options="label group by group for value in vm.inputData.issuer"></select>

这是我的下拉菜单的屏幕截图

提琴手

纳伦·穆拉利

我的解决方案涉及将object of arraysin 和转换array of objects,我尝试使用原始对象创建解决方案,但问题是我无法使用该对象创建多级选择。它需要将对象拆分为单个元素以获得所需的结果,基本上我遍历原始数组并删除第一个条目count:0,因为它在迭代过程中不需要,然后将值分配给最终数组.

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  vm = this;
  vm.inputData = {
    "count": 0,
    "QHPIssuerNames": [
      "NOV BCBS",
      "mark issuer",
      "Release 3 issuer",
      "Los angles issuer"
    ],
    "QDPIssuerNames": [
      "New One",
      "jan issuer",
      "Manage Issuer",
      "test enrollment",
      "testing issuer p"
    ]
  };
  vm.newArray = vm.inputData;
  delete vm.newArray.count;
  vm.finalArray = [];
  for (var k in vm.newArray) {
    for (var j of vm.newArray[k]) {
      vm.finalArray.push({
        key: k,
        value: j
      })
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController as vm' ng-app="myApp">
  <select name="issuer" id="issuer" class="form-control" ng-init="vm.selectedData = vm.finalArray[0]" ng-model="vm.selectedData" ng-options="x.value group by x.key for x in vm.finalArray"></select>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

angularjs ng-options从options数组中选择作为自定义对象

来自分类Dev

AngularJS ng-options默认选择的选项

来自分类Dev

AngularJS ng-options排除特定对象

来自分类Dev

来自对象的AngularJS ng-options

来自分类Dev

angularjs选择所需的不起作用的ng-options

来自分类Dev

在AngularJS中取消选择ng-options下拉菜单

来自分类Dev

AngularJS-使用ng-options填充选择框

来自分类Dev

AngularJS ng-options 设置默认选择值

来自分类Dev

AngularJS在ng-options中比较两个对象

来自分类Dev

如何从angularjs指令中的ng-options返回对象的索引

来自分类Dev

AngularJs:如何使用ng-options绑定对象

来自分类Dev

angularjs ng-options数组相同的标签值

来自分类Dev

AngularJS:select中的数组中的Ng-Options

来自分类Dev

与AngularJS ng-options混淆

来自分类Dev

AngularJS使用ng-options选择不更新父范围中的引用对象属性

来自分类Dev

angularjs用另一个数组选择ng-options默认值

来自分类Dev

使用angularjs ng-options和ng-change时发送选项对象

来自分类Dev

如何在ng-change上使用ng-options获得重复项的值?AngularJS

来自分类Dev

angularJs ng - 在 json 对象数组上重复

来自分类Dev

AngularJs的ng-options-澄清吗?

来自分类Dev

AngularJs ng-options获得ID

来自分类Dev

ng-options的AngularJs条件显示

来自分类Dev

禁用或隐藏选定的ng-options angularjs

来自分类Dev

使用angularjs中的ng-options从选择框中选择多个选项

来自分类Dev

使用ng-options和AngularJS自动选择新的附加值

来自分类Dev

AngularJS:用ng-options选择-如何将值作为整数传递?

来自分类Dev

angularjs-添加多个硬编码选项以选择带有ng-options的框

来自分类Dev

使用AngularJS在语义UI的下拉菜单中选择ng-options

来自分类Dev

使用数字作为模型的AngularJS ng-options不选择初始值

Related 相关文章

  1. 1

    angularjs ng-options从options数组中选择作为自定义对象

  2. 2

    AngularJS ng-options默认选择的选项

  3. 3

    AngularJS ng-options排除特定对象

  4. 4

    来自对象的AngularJS ng-options

  5. 5

    angularjs选择所需的不起作用的ng-options

  6. 6

    在AngularJS中取消选择ng-options下拉菜单

  7. 7

    AngularJS-使用ng-options填充选择框

  8. 8

    AngularJS ng-options 设置默认选择值

  9. 9

    AngularJS在ng-options中比较两个对象

  10. 10

    如何从angularjs指令中的ng-options返回对象的索引

  11. 11

    AngularJs:如何使用ng-options绑定对象

  12. 12

    angularjs ng-options数组相同的标签值

  13. 13

    AngularJS:select中的数组中的Ng-Options

  14. 14

    与AngularJS ng-options混淆

  15. 15

    AngularJS使用ng-options选择不更新父范围中的引用对象属性

  16. 16

    angularjs用另一个数组选择ng-options默认值

  17. 17

    使用angularjs ng-options和ng-change时发送选项对象

  18. 18

    如何在ng-change上使用ng-options获得重复项的值?AngularJS

  19. 19

    angularJs ng - 在 json 对象数组上重复

  20. 20

    AngularJs的ng-options-澄清吗?

  21. 21

    AngularJs ng-options获得ID

  22. 22

    ng-options的AngularJs条件显示

  23. 23

    禁用或隐藏选定的ng-options angularjs

  24. 24

    使用angularjs中的ng-options从选择框中选择多个选项

  25. 25

    使用ng-options和AngularJS自动选择新的附加值

  26. 26

    AngularJS:用ng-options选择-如何将值作为整数传递?

  27. 27

    angularjs-添加多个硬编码选项以选择带有ng-options的框

  28. 28

    使用AngularJS在语义UI的下拉菜单中选择ng-options

  29. 29

    使用数字作为模型的AngularJS ng-options不选择初始值

热门标签

归档