如何使用ng-repeat与<tr>标记？

Question

我有这样一个数据模型：

$scope.meals = [ 
    { 
     name: 'breakfast', 
     days: [ 
      { 
       name: 'monday' 
      }, 
      { 
       name: 'sunday' 
      }    
     ] 
    }, 
    { 
     name: 'lunch', 
     days: [ 
      { 
       name: 'saturday' 
      }, 
      { 
       name: 'sunday' 
      }    
     ] 
    }, 
    { 
     name: 'dinner', 
     days: [ 
      { 
       name: 'friday' 
      }   
     ] 
    }  
]; 

我要生成<tr>的对对象的所有选项，如下所示：

<tr> 
    <td>breakfast - monday</td> 
</tr> 
<tr> 
    <td>breakfast - sunday</td> 
</tr> 
<tr> 
    <td>lunch - saturday</td> 
</tr> 
<tr> 
    <td>lunch - sunday</td> 
</tr> 

等

我该怎么办这个？嵌套0​​是不可能的，我不知道如何使用ng-repeat。

Answer 1

你的数据结构是ng-repeat

首先是没有好，适应它：

$scope.mealsList = $scope.meals.reduce(function(mealArray, meal) { 
    meal.days.forEach(function (day) { 
    mealArray.push({ name: meal.name, day: day.name }); 
    }); 
    return mealArray; 
}, []); 
// result: 
// [{name: 'breakfast', day: 'monday' }, {name:'breakfast', day:'monday' }...] 

然后用NG-重复经典的模板中：

<tr ng-repeat="meal in mealsList"> 
    <td>{{ meal.name }} - {{ meal.day }}</td> 
</tr> 

会是什么发生的是 - 如果你编辑你的原始数据模型，你将不会看到改编的数据模型的变化。

您可以用这种方法规避：

<button ng-click="addMeal()">Add Another meal</button> 

那么你的控制器内：

function addMeal() { 
    $scope.meals.push({}); // add data in your own way 
    $scope.mealsList = adaptMeals($scope.meals); 
} 

这将每次添加新的用餐时间重新建立mealsArray，这是完全罚款除了如果你的膳食数组包含50.000以上的元素;）

Answer 2

你可以根据你的需要使用forEach如下所示格式化数组，并使用相同的w第i个ng-repeat

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

 
app.controller('TestController', function($scope) { 
 
    var mealsData = [ 
 
    { 
 
     name: 'breakfast', 
 
     days: [ 
 
      { 
 
       name: 'monday' 
 
      }, 
 
      { 
 
       name: 'sunday' 
 
      }    
 
     ] 
 
    }, 
 
    { 
 
     name: 'lunch', 
 
     days: [ 
 
      { 
 
       name: 'saturday' 
 
      }, 
 
      { 
 
       name: 'sunday' 
 
      }    
 
     ] 
 
    }, 
 
    { 
 
     name: 'dinner', 
 
     days: [ 
 
      { 
 
       name: 'friday' 
 
      }   
 
     ] 
 
    }  
 
]; 
 
    
 
    var meals = []; 
 
    
 
    mealsData.forEach(function(meal) { 
 
    if(meal && meal.days) { 
 
     meal.days.forEach(function(day) { 
 
      meals.push({name: meal.name, day: day.name}); 
 
     }); 
 
    } 
 
    }); 
 
    
 
    $scope.meals = meals; 
 
    
 
}); 
 

 
angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-controller="TestController"> 
 
    <tr ng-repeat="meal in meals"> 
 
    <td>{{meal.name + ' - ' + meal.day}}</td> 
 
    </tr> 
 
</table>

Answer 3

您可以ng-repeat-start和ng-repeat做：但也有将epmty tr标签

<table > 
    <tr ng-repeat-start="meal in meals" ng-if="meal.close"></tr> 
    <tr ng-repeat-end ng-repeat="day in meal.days"> 
     <td>{{meal.name}} - {{day.name}}</td> 
    </tr> 
</table> 

Answer 4

您可以使用模板/ TBODY标签，你会不会有根本改变你的数据结构：

例子乐：在Angular2 u可以使用

<template ngFor #meal [ngForOf]="meals"> 
    <tr ngFor="#day of meal.days"> 
    <td>{{ meal.name }} - {{ day }}</td> 
    </tr> 
</template> 

示例：在Angular1：（AFAIK，它是好的具有的多个<tbody>在单个表中。）

<tbody ng-repeat="meal in meals"> 
    <tr ng-repeat="day in meal.days"> 
    <td>{{ meal.name }} - {{ day }}</td> 
    </tr> 
</tbody>