使用复选框,下拉列表和文本框

时间:2017-01-05 10:22:17

标签: angularjs ionic-framework timeslots

我试图使用angularjs显示一个复选框,下拉菜单和文本框,如图所示。但是,我无法正确行事,现在我将一切都展示在另一个之下。另外,如何为表中的不同文本框获取不同的值,以便表中每行的时间计算不同。

enter image description here

控制器:

    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 个答案:

答案 0 :(得分:2)

仅限table tr td格式。您需要在ng-repeat上添加tr并使用td标记格式,如下所示(请提供所需的正确数组对象名称。)

<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>