Question

在下表中，特定日期可能有多个列表。因此，对于列表列，给定日期可以有多个列表。

我可以在单个单元格中插入多个值，但它会移动我插入多个值的行，请查看DEMO。

示例：表

日期 ...............的列表

12/1/2016 .... python，angularjs

13/1/2016 ..... java，html

数据：

$scope.todolists = [{
    date: '12/1/2016',
    list: {python, angularjs}
}, {
    date: '13/1/2016',
    list: {java, html}
}];

查看：

 <tbody>
     <tr ng-repeat="todolist in todolists" >
        <td>{{todolist.date}}</td>
       <td ng-repeat="list in todolist">{{subject}}</td>                                         
     </tr>
 </tbody>

我在ng-repeat内尝试了ng-repeat，但它无效。所以我的问题是如何在表格的单个单元格中插入多个值。

Answer 1

您的推荐错误。

 <tbody>
     <tr ng-repeat="todolist in todolists" >
        <td>{{todolist.date}}</td>
       <td ng-repeat="list in todolist.list">{{list}}</td>                                         
     </tr>  
 </tbody>

或者，最好是

 <tbody>
     <tr ng-repeat="todolist in todolists" >
        <td>{{todolist.date}}</td>
        <td>
            <span ng-repeat="list in todolist.list">
                  {{list + ($last ? "" : ", ") }}
            </span>                                         
        </td>
     </tr>  
 </tbody>

Answer 2

您的数据未正确声明。它应该是：

    $scope.todolists = [{
      date: '12/1/2016',
      list: [
        'python',
        'angularjs'
      ]
    }, {
      date: '13/1/2016',
      list: [
        'java',
        'html'
      ]
    }];

注意''围绕python等，列表应该是list =＆gt; []而不是{}。

一个不错的方法是编写自定义过滤器：

angular.module("myApp", [])
  .filter('nicelist', function() {
    return function(input) {
      if (input instanceof Array) {
        return input.join(",");
      }
      return input;
    }
  });

然后，您可以使用：

<table>
  <tr ng-repeat="todolist in todolists">
    <td>{{todolist.date}}</td>
    <td>{{todolist.list | nicelist}}</td>
  </tr>
</table>

这是一个有效的fiddle。

Answer 3

您的JSON无效。如果要存储没有属性的值，则需要使用Array，而不是Object。此外，如果值为string，则需要使用以下逗号进行换行：['val1', 'val2', ...];
您可以在ng-repeat内ng-repeat进行操作，但需要迭代正确的属性todolist.list。
如果您的模型中没有属性{{subject}}，则无法使用subject。因此，当您{{list}} ng-repeat ng-repeat="list in todolist.list"时，您需要使用angular.module('app', []). controller('ctrl', function($scope) { $scope.todolists = [{ date: '12/1/2016', list: ['python', 'angularjs'] }, { date: '13/1/2016', list: ['java', 'html'] }]; });。

完整代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr ng-repeat="todolist in todolists">
      <td>{{todolist.date}}</td>
      <td ng-repeat="list in todolist.list">{{list}}</td>   
    </tr>
  </table>
</div>

＆＃13;

<template name="favorites">
    {{#each favorites}}
      {{> stock}}
    {{/each}}
</template>

<template name="stock">
    <div class="row" id="{{_id}}">
        <div class="col-xs-6 symbol">{{symbol}}</span>
        <div class="col-xs-6 quote">{{quote}}</span>
    </div>
</template>

＆＃13;

如何在angularjs中的表格单元格中插入多个值

3 个答案: