Question

这是我的toogle代码。我从后端获取此HTML。我在ng-repeat中使用它。当我点击一个开关并激活时，所有开关都变为活动状态，我的期望只是那个被点击的开关变为活动状态

<td class="">
  <label class="switch switch custom-switch" aria-hidden="false">
    <input type="checkbox" ng-model="agent_approve" ng-click="agent_status(agent_approve,id)" class="ng-pristine ng-untouched ng-valid" aria-checked="true" aria-invalid="false">
    <span></span>
  </label>
</td>

正如我所提到的，所有数据都来自后端。我们只将它保存在表格中并在html页面上呈现它控制器数据

$scope.dtInstance = $('#all_driver_datatable').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "order": [[0, "desc"]],
                "iDisplayLength": 25,
                "bDestroy": true,
                "bSearchable": true,
                "bPagination": true,
                "bPaginate": true,
                "sDom": '<"top"f>rt<"bottom"ipl><"clear">',
                language: {
                    paginate: {
                        next: '<i class="tf right-chevron"></i>',
                        previous: '<i class="tf left-chevron"></i>'
                    }
                },
                aoColumns: [
                    {"sTitle": "{{'more.agents.AGENTS_ID' | translate}}", "sClass": "ng-cloak", "sWidth": "7%"},
                    {
                        "sTitle": "{{'more.agents.IMAGE' | translate}}",
                        "sClass": "ng-cloak",
                        "sWidth": "7%",
                        orderable: false
                    },
                    {"sTitle": "{{'more.agents.USERNAME' | translate}}", "sClass": "ng-cloak", "sWidth": "10%"},
                    {"sTitle": "{{'more.agents.NAME' | translate}}", "sClass": "ng-cloak", "sWidth": "10%"},
                    {"sTitle": "{{'more.agents.EMAIL' | translate}}", "sClass": "ng-cloak", "sWidth": "9%"},
                    {"sTitle": "{{'more.agents.PHONE' | translate}}", "sClass": "ng-cloak", "sWidth": "9%"},
                    {"sTitle": "{{'more.agents.DEVICE_TYPE' | translate}}", "sClass": "ng-cloak", "sWidth": "6%"},
                    {
                        "sTitle": "{{'more.agents.DEVICE_VERSION' | translate}}",
                        "sClass": "ng-cloak",
                        "sWidth": "6%"
                    },
                    {"sTitle": "{{'more.agents.TEAM' | translate}}", "sClass": "ng-cloak", "sWidth": "9%"},
                    {"sTitle": "{{'more.agents.STATUS' | translate}}", "sClass": "ng-cloak", "sWidth": "12%"},
                    {
                        "sTitle": "{{'more.agents.ACTIONS' | translate}}",
                        "sClass": "ng-cloak",
                        orderable: false,
                        "sWidth": "14%"
                    },
                ],
                // "columnDefs": [
                //     {targets: 'no-sort', orderable: false},
                //     {"type": "date-de", targets: 7}
                // ],
                "headerCallback": function (thead, data, start, end, display) {
                    $compile(thead)($scope);
                    $('.dataTables_wrapper .dataTables_filter input[type="search"]', '.fancy-table-outer').attr('placeholder', 'Search '+$scope.driverNamedAs).attr('onkeyup', 'showLoader()').focus().after('<div class="tf search"></div>');
                },
                "sAjaxSource": api,
                "createdRow": function (row, data, dataIndex) {
                    $compile(row)($scope);
                    $compile($('#all_driver_datatable thead tr')[0])($scope);
                    hideLoader();
                },
                "fnDrawCallback": function() {
                    hideLoader();
                },
                "columnDefs": [ {
                "targets": arr,
                "visible": false
            }
            ]

            }).fnSetFilteringDelay(2000);

            $timeout(function () {
                $compile($('#all_driver_datatable thead tr')[0])($scope);
                $("#all_driver_datatable").show();
                $('table th').css('opacity', '1');
                hideLoader();
            }, 2000);

        }

Answer 1

您为所有复选框分配了相同的ng-model。因此，如果一个变为true，则会使所有复选框都已选中。

更改ng-model的值，例如，改为使用数组。

<tr ng-repeat="item in items track by $index">
  <td class="">
    <label class="switch switch custom-switch" aria-hidden="false">
      <input type="checkbox" ng-model="agent_approve[$index]" ng-click="agent_status(agent_approve,id)" class="ng-pristine ng-untouched ng-valid" aria-checked="true" aria-invalid="false">
      <span></span>
    </label>
  </td>
</tr>

这样，agent_approve将是一个布尔值数组，每个布尔值代表相应复选框的选中状态。

如何进行主动特定切换

1 个答案: