如何进行有效的特定切换 [英] How to make active particular toggle

问题描述

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

This is my toogle code .Iam getting this HTML from backend . Iam using it in ng-repeat.When I click on a switch and make activate ,all switches become active and my expectation is only that switch become active that is clicked

<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页上。
控制器数据为

as i have mentioned that all data is coming from backend . we only save it in tables and render it on html page controller data is

$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);

        }

推荐答案

您有相同的 ng-model 分配给所有复选框。因此，如果一个变为 true ，它将所有复选框都选中。

You have the same ng-model assigned to all of your checkboxes. So, if one becomes true, it makes all the checkboxes as checked.

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

Change the value of your ng-model, for example, use an array instead.

<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 将是一个数组布尔值，每个代表相应复选框的选中状态。

This way, agent_approve will be an array of boolean values, each representing the checked state of the corresponding checkbox.

这篇关于如何进行有效的特定切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！