angularjs - 来自对象键的 angular-ui-grid 行

标签 angularjs angular-ui-grid

我有一个对象容器,这些对象按其身份索引存储在哈希中。

myObjs = {
  "hello id":{
    foo:"hello foo data",
    bar:"hello bar data"
  },
  "world id":{
    foo:"world foo data",
    bar:"world bar data"
  }
}

我想将 myObjs 中的每个对象绑定(bind)到 ui 网格中的一行 ( http://ui-grid.info/ )。在通用表中,它看起来像:

<table>
    <tr ng-repeat="(id, obj) in myObjs">
      <td>{{id}}</td>
      <td>{{obj.foo}}</td>
      <td>{{obj.bar}}</td>
    </tr>
</table>

一种解决方案是从 myObjs 的内容派生一个新的对象数组,用作 ui 网格的输入数据,但这意味着我必须维护 myObjs 和派生数组输入之间的绑定(bind)。

是否有更自然的方式将 ui-grid 绑定(bind)到 myObjs?

最佳答案

你能提供一个 fiddle /插头来显示你正在尝试做的事情吗? ng-repeat 可以迭代对象,就像迭代数组一样,因此不需要从对象创建派生数组。

我在这里创建了一个:Plunk 看起来工作正常,所以我不确定问题是什么。

HTML:

<html ng-app="App">
    <head>
        <title>AngularJS Plunker</title>

        <!-- AngularJS - MVVM Pattern -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

        <!-- Page Specific -->
        <script src="client.js"></script>

    </head>

    <body ng-controller="Controller">

      <table border="1">
        <tr ng-repeat="(id, obj) in myObjs">
          <td>{{id}}</td>
          <td>{{obj.foo}}</td>
          <td>{{obj.bar}}</td>
        </tr>
      </table>

    </body>
</html>

js:

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

app.controller('Controller', function ($scope) {

  $scope.myObjs = {
    "hello id":{
      foo:"hello foo data",
      bar:"hello bar data"
    },
    "world id":{
      foo:"world foo data",
      bar:"world bar data"
    }
  }

});

关于angularjs - 来自对象键的 angular-ui-grid 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27609944/

相关文章:

AngularJS:$HTTP.GET 被取消

javascript - 如何在 Angular UI Grid 中获取分组列的数据

javascript - Angular ui-grid 渲染的回调函数

javascript - 为什么我收到错误参数未定义?

javascript - AngularJS UI 网格,如何用 0.00 美元过滤货币

javascript - 将对象附加到对象会删除之前附加的数据

javascript - 如何聚合多个字段的ngMessage

javascript - 解决 Angular 资源 promise

javascript - ng-bind-html 获取html内容的首字母

javascript - 如何强制水平滚动在 UI-GRID 上向右移动