【问题标题】:how to add data horizontally in ng-repeat如何在 ng-repeat 中水平添加数据
【发布时间】:2017-09-29 07:38:20
【问题描述】:

如何水平添加按钮,如下图所示,请帮助我,我想在一列中动态添加主题按钮如何在 angularjs 中实现

 <table class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer" role="grid">
                    <thead>
                        <tr>
                            <th style="width: 120px;" colspan="1" rowspan="1">Days</th>
                            <th style="width: 760px;" colspan="1" rowspan="1">Schedules</th>
                            <th style="width: 100px;" colspan="1" rowspan="1">Add</th>

                        </tr>
                    </thead>
                    <tbody class="gradeX">
                        <tr ng-repeat="x in additems">
                            <td>{{x.teacher_name }}</td>
                            <td><div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Math
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" href="#">Dropdown link</a>
    <a class="dropdown-item" href="#">Dropdown link</a>
</div>

                            <td><a href="" data-toggle="tooltip" title="Remove Subject" ng-click="removesubject(x)"><i class="fa fa-close text-danger" aria-hidden="true"></i></a></td>


                        </tr>
                    </tbody>
                </table>

我想要下面这样的图片

【问题讨论】:

  • 首先在td标签中添加button标签...

标签: javascript angularjs css angularjs-ng-repeat


【解决方案1】:

这里给出基本逻辑:

angular.module('app',[]).controller('MyController', function($scope){
   $scope.items=[
    {name:'Sunday', stuff:[]},
    {name:'Monday', stuff:[]}
   ];
   
   $scope.add = function(stuff){
    stuff.push(stuff.length);
   };
})
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='MyController'>
<table>
  <tr>
    <th>Day</th>
    <th>Schedule</th>     
    <th></th>     
  </tr>
  <tr ng-repeat='item in items'>
    <td>{{item.name}}</td>
    <td>
      <span ng-repeat='sub in item.stuff'>{{sub}}{{$last ? '' : ','}}</span>
    </td>     
    <td>
      <input type='button' value='Add' ng-click='add(item.stuff)'/>
    </td>     
  </tr>
</table>
</div>

【讨论】:

    猜你喜欢
    • 2017-07-24
    • 2014-12-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-30
    • 2019-01-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多