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

how to insert more than one value in table cell in angularjs

本文关键字：插入 单元格 表格 AngularJS      更新时间：2023-09-26

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

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

示例：表

日期...列表

2016/12/1 .... 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但它不起作用。所以我的问题是如何在表格的单个单元格中插入多个值。

你的引用是错误的。

 <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>
  1. 您的JSON无效。如果要存储没有属性的值，则需要使用 Array 而不是 Object 。此外，如果值string则需要用逗号将它们包装起来，例如：['val1', 'val2', ...];
  2. 您可以在ng-repeat内部执行ng-repeat，但您需要迭代正确的属性todolist.list。
  3. 如果模型中没有属性subject，则无法使用{{subject}}。所以当你做ng-repeat时，你需要使用{{list}}，比如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'] }];
});
<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>

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

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

请注意 python 等周围的 ''，列表应该是列表 => [] 而不是 {}。

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

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>

这是一个工作小提琴。

相关文章：