使用 ux-datagrid、angularJS 和嵌套迭代答案

【问题标题】：Working with ux-datagrid, angularJS and nested interations使用 ux-datagrid、angularJS 和嵌套迭代
【发布时间】：2015-01-23 21:35:01
【问题描述】：

我用一个模板让它工作得很好，但在尝试用另一个模板替换我的内部 ng-repeat 时遇到了问题。有点像分组数据，或者更像嵌套数据。

所以让我在这里简化我的 html：

  <div data-ng-controller="index.dataGridController" data-ux-datagrid="index.items" class="listA datagrid" data-addons="whichTemplate"  grouped="'focus'">
      <script type="template/html" data-template-name="default" data-template-item="item">
        <div>
            <h3>{{ item.obj.name }}</h3>
             <!--- instead of 
             <ul>
                 <li ng-repeat="listItem in item.focus>{{listitem}}</li>
              </uL
              -->
        </div>
      </script>
      <script type="template/html" data-template-name="innerFocus" data-template-item="item">
        <div>
          <ul>
            <li>{{item.focus.id}}</li>
          </ul>
        </div>
      </script>
  </div>

index.items 看起来像这样：

[{
    "obj": {
    "name": "someName" 
    }
    "focus": [
    {"id": "something here"},
    {"id": "Another etc"}
    ]
}]



// which template is basically copy and pasted from examples
angular.module('ux').factory('whichTemplate', function () {
     return function (inst) {
        // now we override it with our method so we decide what template gets displayed for each row.
        inst.templateModel.getTemplate = function (item) {
            var name = item.focus ? 'innerFocus' : 'default';
            // now we get the template from the name.
            return inst.templateModel.getTemplateByName(name);
        };
    };
});

尝试使用焦点数组迭代列表。有任何想法吗？我认为这将成为文档中的一个很好的例子。添加小提琴。 http://jsfiddle.net/uftsG/88/ 我没有将所有焦点数组放在一个 li 中，而是试图让它们散开，同时将 item.obj.name 放在列表上方。

【问题讨论】：

标签： javascript angularjs datagrid

【解决方案1】：

我不熟悉 ux-data 网格。如果你打算使用它，你可以忽略这个答案，但我做了一个小型搜索引擎（纯粹出于学术原因），最后我使用 ng-grid 来显示数据。我遵循了 github 文档并最终使用 $scope.getMyData 函数在后端引导 @scope.myDefs 和我需要的数据。在视图中，您真正需要做的就是添加输入字段以获取数据，然后添加一个带有 ng-grid 的 div 类。它非常酷，因为它确保了代码是模块化的，并且视图中没有任何时髦的函数以及嵌套的 ng-repeats 等等。唯一给我带来麻烦的部分是 CSS，因为我还不精通 bootstrap :) 如果您最终对 ng-grid 感兴趣，这里有一些文档。

http://angular-ui.github.io/ng-grid/

【讨论】：