javascript - ngOptions 二级对象显示

标签 javascript html angularjs ng-options

我有这样的结构:

model = [
{
  name: 'name1',
  items: [
    {
      name: 'subobj1'
    },
    {
      name: 'subobj2'
    }]
}, 
{
  name: 'name2',
  items: [
    {
      name: 'subobj1'
    },
    {
      name: 'subobj2'
    }]
}, 
    .... 
]

问题是:如何编写 ngOptions 属性来像这样输出这个对象?:

<select>
    <optgroup label="name1">
      <label>subobj1</label>
      <label>subobj2></label>
    </optgroup>
    ....
</group>

此外 - ngRepeat 不是一个选项。我必须单独执行此 ngOptions 才能使插件正常工作。

最佳答案

ngOptions 不支持多维数组。您必须先展平阵列。

阅读更多 this answer .

我使用了一个过滤器:

app.filter('flatten' , function(){
  return function(array){
    return array.reduce(function(flatten, group){
      group.items.forEach(function(item){
        flatten.push({ group: group.name , name: item.name})
      })
      return flatten;
    },[]);
  }
})

和标记:

<select ng-model="select"
        ng-options="item.name 
                    group by item.group 
                    for item in model | flatten"></select>

关于javascript - ngOptions 二级对象显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21229358/

相关文章:

php - 调用 php 通过 ID 删除 mysql 行的按钮

angularjs - 当我添加的类中有一个连字符时,我无法让 ng-class 工作。

javascript - How to import excel file using HTML Input file and read the file contents in Node.js (如何将完整路径发送到 Node.js)

javascript - 在 Node.js/Express 中,如何自动将此 header 添加到每个 "render"响应中?

javascript - 将 Metrics Graphics.js 与 React JS 结合使用

javascript - 根据选定的输入数字迭代 v-for

javascript - 从 Firebase 获取图像 URL

html - IE 上的背景大小需要比其他浏览器大

JavaScript:选择百分比数字

javascript - Angular ui路由器后退按钮问题