添加并获取ngRepeat复选框的数据

时间:2017-08-22 16:33:35

标签: javascript angularjs checkbox

我有一个问题,我有一个ng-repeat,向我显示当前的用户,每天我都要添加用户的饭菜,这就是为什么我有5个复选框,3个必须标记,2个不是,准备好的用户添加这些膳食数据时会出现问题,但我没有从复选框中收到任何数据。

我需要在我的函数中添加我收到的那些复选框的值。

<tr ng-repeat="users in usersData">
    <td>
        {{ $index + 1 }}
    </td>
    <td>
        {{ users.id }}
    </td>
    <td>
        {{ users.apellidos }}
    </td>
    <td>
        {{ users.nombres }}
    </td>
    <td>
        <input class="form-control" type="checkbox" style="width: 100px;" ng-model="users.desayuno" ng-checked="true">
    </td>
    <td>
        <input class="form-control" type="checkbox" style="width: 100px;" ng-model="users.almuerzo" ng-checked="true">
    </td>
    <td>
        <input class="form-control" type="checkbox"  style="width: 100px;" ng-model="users.te" ng-checked="true">
    </td>
    <td>
        <input class="form-control" type="checkbox" style="width: 100px;" ng-model="users.cena">
    </td>
    <td>
        <input class="form-control" type="checkbox" style="width: 100px;" ng-model="users.amanecida">
    </td>
</tr>

此处不显示users.desayuno users.almuerzo users.te users.cena users.amanecida

$scope.saveDataDining = function() {
    angular.forEach($scope.usersData, function(obj) {
      console.log(obj);
    });
  };

这里有一个有问题的傻瓜。

https://plnkr.co/edit/tHNhKQObkjRtUEfmI19o?p=preview

1 个答案:

答案 0 :(得分:0)

正如@georgeawg所说:

  

ng-checked的documentation明确指出:请注意,此指令(ng-checked)不应与ngModel一起使用,因为这可能会导致意外行为。

  1. 初始化控制器中的对象

    $scope.usersData = [{
      id: 1,
      nombres: "Amilkar Shegrid",
      apellidos: "Contreras Castro",
      sexo: "MASCULINO",
      codido_seguro: 5213635,
      desayuno: true,
      almuerzo: true,
      te: true,
      cena: false,
      amanecida: false
    }, {...
    
  2. 并在复选框中添加ng-changeng-click功能以设置值

    // controller
    $scope.toggleDesayuno = function(userid) {
      var u = $scope.usersData.find((user)=>userid==user.id)
      u.desayuno = !u.desayuno
    }
    
    // template
    <input class="form-control" type="checkbox" style="width: 100px;" ng-click="toggleDesayuno(users.id)">