ngOptions两级对象显示

时间:2014-01-20 08:35:59

标签: javascript html angularjs ng-options

我有这个结构:

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

问题是:如何编写ngOptions attrbiute来输出这个对象?:

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

另外 - ngRepeat不是一个选项。我必须单独使用ngOptions才能使用插件。

2 个答案:

答案 0 :(得分:8)

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>

答案 1 :(得分:1)

typedef Rcpp::ListOf<Rcpp::NumericMatrix> MatList;

// [[Rcpp::export]]
Rcpp::List Transform2(MatList x) {
    R_xlen_t nx = x.size(), ny = x[0].nrow();
    Rcpp::List y(ny);

    for (R_xlen_t iy = 0; iy < ny; iy++) {
        Rcpp::List tmp(nx);
        for (R_xlen_t ix = 0; ix < nx; ix++) {
            tmp[ix] = x[ix].row(iy);
        }
        y[iy] = tmp;
    }

    return y;
}

/*** R

L1 <- lapply(1:10, function(x) {
    matrix(rnorm(20000), ncol = 100)
})

L2 <- lapply(1:nrow(L1[[1]]), function(x) {
    lapply(L1, function(y) unlist(y[x,]))
})

microbenchmark::microbenchmark(
    "R" = lapply(1:nrow(L1[[1]]), function(x) {
        lapply(L1, function(y) unlist(y[x,]))
    }),
    "Transform" = Transform(L1),
    "Transform2" = Transform2(L1),
    times = 200L)

#Unit: microseconds
#      expr      min       lq     mean   median       uq       max neval
#         R 6049.594 6318.822 7604.871 6707.242 8592.510 64005.190   200
# Transform  928.468 1041.936 3130.959 1166.819 1659.745 71552.284   200
#Transform2  850.912  957.918 1694.329 1061.183 2856.724  4502.065   200

*/

您可以在第一个选项(顺便说一下是组标签)和第二个选项行上的<select> <option ng-repeat-start="m in model" ng-bind="m.name"></option> <option ng-repeat-end ng-repeat="item in m.items" ng-bind="item.name"></option> </select> 之类的内容中添加类似style="font-weight: bold;"的内容,这是所有第一个选项的另一个重复选项线。 所以基本上这样做你只需要添加2个级别(没有style="padding-left: 15px;"标记,请注意)。