ng-switch使用对象键

时间:2015-06-17 14:01:22

标签: javascript angularjs

我想对一组对象进行分组

var data = [ 
  {term: 'baz', description: 'Patient'}, 
  {term: 'bar', description: 'Patient'},  
  {term: 'foo', description: 'Doctor'} 
]

我现在想按照说明对这些数据进行分组。使用下划线_.groupBy我最终得到了

$scope.grouped = _.groupBy(data, 'description')
{Patient: [
    {term: 'baz', description: 'Patient'},
    {term: 'bar', description: 'Patient'}
   ]
 }, 
{Doctor: [
    {term: 'foo', description: 'Doctor'}
   ]
 } 

您可以将ng-switch与对象键一起使用吗?

<div ng-switch="grouped">
  <span ng-switch-when="Patient">
     <p>Patients</p> // only shown once to categorize the data
      // ng-repeat in here
  </span>
  <span ng-switch-when="Doctor">
     <p>Doctors</p> // only shown once to categorize the data
      // ng-repeat in here
  </span>
</div>

我可以在分组之前在数组上使用ng-switch,但每次都会重复分组的标题。实现类似于上述HTML的最佳方法是什么,其中每个标题仅生成一次并且数据被分组?

所需的输出

<h1>Patients<h1>
  <p>baz</p>
  <p>bar</p>
<h1>Doctors</h1>
  <p>foo</p>

1 个答案:

答案 0 :(得分:0)

好像你想在ng-repeat里面使用它,在这种情况下你可以使用对象键。

<div ng-repeat="(group, data) in grouped">
    <div ng-switch="group">
        <div ng-switch-when="Patient">
            <h1>Patients</h1>
            <p ng-repeat="patient in data">{{patient.term}}</p>
        </div>
        <!-- same for doctor -->
    </div>
</div>