AngularJS ng-repeat表格复选框默认选中及值处理问题

问题1：默认全选 + 全选/取消全选按钮 #

首先，ng-init不太适合处理默认选中状态（尤其是数据异步加载时容易失效），更靠谱的方式是在控制器里直接初始化每个项的选中状态，同时我们可以轻松实现全选/取消全选的交互：

控制器代码

angular.module('yourAppName', [])
.controller('TestController', function($scope) {
  // 假设你的JSON数据是从接口获取的，这里用示例数据
  $scope.servicios = [
    { id: 1, nombre: 'Servicio A' },
    { id: 2, nombre: 'Servicio B' },
    { id: 3, nombre: 'Servicio C' }
  ];

  // 初始化所有复选框为选中状态
  $scope.servicios.forEach(servicio => {
    servicio.seleccionado = true;
  });

  // 全选状态变量，初始为true
  $scope.todosSeleccionados = true;

  // 全选/取消全选触发的函数
  $scope.cambiarSeleccionTotal = function() {
    $scope.servicios.forEach(servicio => {
      servicio.seleccionado = $scope.todosSeleccionados;
    });
  };

  // 监听单个复选框变化，自动更新全选按钮状态
  $scope.$watchCollection('servicios', function(nuevosServicios) {
    $scope.todosSeleccionados = nuevosServicios.every(s => s.seleccionado);
  });
});

视图修改

<div ng-controller="TestController">
  <!-- 全选/取消全选按钮 -->
  <button class="btn btn-sm btn-primary" ng-click="cambiarSeleccionTotal()">
    {{ todosSeleccionados ? '取消全选' : '全选' }}
  </button>

  <table class="table table-striped">
    <tr>
      <th>
        <!-- 表头复选框，和全选状态绑定 -->
        <input type="checkbox" ng-model="todosSeleccionados" ng-change="cambiarSeleccionTotal()">
      </th>
      <th>Servicio</th>
      <!-- 其他表头列 -->
    </tr>
    <tr ng-repeat="servicio in servicios">
      <td>
        <!-- 每个行的复选框，绑定到当前项的seleccionado属性 -->
        <input type="checkbox" ng-model="servicio.seleccionado">
      </td>
      <td>{{ servicio.nombre }}</td>
      <!-- 其他数据列 -->
    </tr>
  </table>
</div>

问题2：取消勾选后避免空字符串数组 #

你看到的["", "", ""]应该是因为收集选中项的逻辑错误，把未选中的项也加入了数组。正确的做法是只收集选中的项，没有选中时返回空数组或者undefined：

在控制器里添加一个获取选中项的函数：

$scope.obtenerServiciosSeleccionados = function() {
  // 过滤出选中的项，提取你需要的字段（比如nombre）
  const seleccionados = $scope.servicios
    .filter(servicio => servicio.seleccionado)
    .map(servicio => servicio.nombre);
  
  // 如果没有选中项，返回undefined（或者空数组，根据你的业务需求调整）
  return seleccionados.length > 0 ? seleccionados : undefined;
};

然后在视图里使用这个函数来展示或提交数据：

<!-- 示例：展示选中的结果 -->
<div class="mt-3">
  Servicios seleccionados: {{ obtenerServiciosSeleccionados() || 'Ninguno' }}
</div>

这样当所有复选框都取消时，不会生成空字符串数组，要么返回undefined（显示"Ninguno"），要么返回空数组，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Andres CC