代码之家 › 专栏 › 技术社区 › PotatoBox

使用AngularJS在表中动态生成列

angularjs html python

PotatoBox · 技术社区 · 7 年前

data : {
    'Person A': {
        'Week 1' : {
            'Task 1': True,
            'Task 2': False,
        },
        'Week 2' : {
            'Task 1': True,
            'Task 2': True,
        },
    },
    'Person B': {
        'Week 1' : {
            'Task 1': True,
            'Task 2': False,
        },
        'Week 2' : {
            'Task 1': False,
            'Task 2': False,
        },
    },
}

这种结构随着周数的变化而变化。我想让它动态生成,所以它看起来像这样:

我想到的第一件事就是创建列模板,然后对列表中的每个元素重复它。但这正是我遇到问题的地方——我就是做不到,每一个新列都被添加到上一列的下面。我的代码如下:

<table>
  <thead>
    <th>Person ID</th>
    <th ng-repeat="week in weeks order by $index">
      <tr>
        <td>{{ week }}</td>
      </tr>
      <tr>
        <td>Task 1</td>
        <td>Task 2</td>
      </tr>
    </th>
  </thead>
  <tbody>
    <tr ng-repeat='person in data'>
      <td>{{ person }}</td>
      <td>{{ Task 1 }}</td>
      <td>{{ Task 2 }}</td>
    </tr>
  </tbody>
</table>

另外,我还想循环处理任务,这意味着我想为特定的人动态地创建和填充每个特定星期的数据列,但我不知道如何-我不能只是把 ng-repeat 在里面 <td>

1 回复 | 直到 7 年前

Slava Utesinov 7 年前

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.data = {
    'Person A': { 
      'Week 1': { 'Task 1': true, 'Task 2': false },
      'Week 2': { 'Task 1': true, 'Task 2': true }
    },
    'Person B': {
      'Week 1': { 'Task 1': true, 'Task 2': false },
      'Week 2': { 'Task 1': false, 'Task 2': false }
    }
  };

  $scope.weeks = [];
  for (var personName in $scope.data) {
    var person = $scope.data[personName];
    for (var weekName in person) {
      var week = person[weekName];

      var weekScope = {
        name: weekName,
        tasks: []
      };
      $scope.weeks.push(weekScope);

      for (var taskName in week)        
        weekScope.tasks.push(taskName)      
    }
    break;
  }

})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.center{
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <table>
    <thead>
      <tr>
        <td rowspan='2'>Person ID</td>
        <td ng-repeat='week in weeks' class='center' colspan='{{week.tasks.length}}'>
          {{week.name}}
        </td>
      </tr>
      <tr>
        <td ng-repeat-start='week in weeks' hidden></td>
        <td ng-repeat-end ng-repeat='task in week.tasks'>{{task}}</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='(personName, person) in data'>
        <td>{{personName}}</td>
        <td ng-repeat-start='week in weeks' hidden></td>
        <td ng-repeat-end ng-repeat='task in week.tasks'>
          {{person[week.name][task]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

推荐文章

Google User · Django管理员在`list_display中未显示`creation_date`字段`

10 月前

user29747013 · 如何创建一个新的数据框架,其中包含原始数据框架中列的聚合列?

10 月前

ÎÎÎ½Î· ÎÎ®Î¹Î½Î¿Ï · Python lxml.html语法错误:使用lxml find时XPATH的谓词无效

10 月前

user29715306 · from_users=和chats=电视节目中的差异

10 月前

Redshoe · 当执行numpy.genfromtxt()时,python是否会读取文件的所有行?

11 月前

RASEL MAHMUD · 为什么以及如何在is_even()函数内的IF条件中递归X变量在满足0后递增?[副本]

11 月前

prayner · 更新嵌套字典包含列表中的项

11 月前

Bringo Jr · 我可以在O(n)中解决这个问题吗?

11 月前

Dave · 如何在for循环中修改列表值

11 月前

Shukurullox Komiljonov · 从记录中获得相互和解。使用SQL

11 月前