Working with check-box, drop-down and text box

605 Views Asked by At

Im trying to display a check box , drop-down and text box like shown in the image using angularjs. But I couldn't get it right and now Im displaying everything one below the another. Also how to get different values for different text-boxes in the table so that time calculations are different for each row in the table.

enter image description here

controller:

    mainApp.controller('settings-controller', function ($scope) {
   $scope.fields = [{ id: 1, name: 'Sunday' },
  { id: 2, name: 'Monday' },
  { id: 3, name: 'Tuesday' },
  { id: 4, name: 'Wednesday' },
  { id: 5, name: 'Thursday' },
  { id: 5, name: 'Friday' },
  { id: 5, name: 'Sunday' }];

Html:

  <ion-checkbox ng-repeat="field in fields" ng-model="field.checked" ng-checked="field.checked">
            {{field.name}}
        </ion-checkbox>
<input type="text" ng-model="medicinetime">
<select ng-model="time" ng-options="time for time in hours"
<option value="">Select</option>
</select>
1

There are 1 best solutions below

2
On

It's just a table tr td format only. you need add ng-repeat on tr and format with td tag's like as below (please provide the correct array object name what they need.)

<table>
<tr ng-repeat="field in fields">
<td>
<ion-checkbox ng-repeat="field in fields" ng-model="field.checked" ng-checked="field.checked">
            {{field.checked}}
        </ion-checkbox></td>
<td>
<input type="text" ng-model="field.name"></td>
<td>
<select ng-model="field.time" ng-options="time for time in hours"
<option value="">Select</option>
</select></td></tr>
</table>