CODEWITHSUNDEEP
javascriptangularjscssangularjs-ng-repeat
Addi Khan
Addi Khan

Reputation: 201

how to add data horizontally in ng-repeat

how to add buttons horizontaly something like below image, please help me i want add subjects button horizontally in one column dynamically how to possible in 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>

i want below image like this enter image description here

Upvotes: 0

Views: 689

Answers (1)

Slava Utesinov
Slava Utesinov

Reputation: 13488

Here is presented base logic:

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>

Upvotes: 1

Related Questions