Angularjs在字段下显示ng-repeat结果

时间:2014-02-27 01:33:20

标签: javascript angularjs angularjs-directive angularjs-scope

重复以在输入字段中显示结果。

Here is the data (being returned from controller scope is companycodes)
company     code 
abc         111
abc         10012
abc         6434
xyz         1235
xyz         33

<div ng-repeat="x in companycodes">
<h3>{{x.company}}</h3>
<input type="text" ng-name="code"  ng-model=x.code>
</div>

我要做的是它列出公司标题下的代码,即

abc
   111
   10012
   6434
xyz
   1235
   33

您能告诉我如何更改ng-repeat以获得所需的输出。 谢谢

1 个答案:

答案 0 :(得分:1)

您可以编写过滤器,按company对数据进行分组,然后重复code具有相应的company

JS

myModule.filter('groupBy', function () {
  return function (array, expression) {
    var result = [], i = 0;
    if (!angular.isArray(array)) {
      return array;
    }
    for (; i < array.length; i += 1) {
      var value = array[i][expression];
      if (result.indexOf(value) === -1) {
        result.push(value);
      }
    }
    return result;
  };
})

HTML:

<div data-ng-repeat="company in (companycodes | groupBy: 'company')">
  <h3>{{company}}</h3>
  <div data-ng-repeat="comp in companycodes | filter: {company: company}">
    <input type="text" data-ng-model="comp.code">
  </div>
</div>

http://plnkr.co/edit/bhQVDUVJS8Tz7yjaEPaM?p=preview