Bootstrap 5 Accordion 中的意外复选框行为

问题描述 投票：0回答：1

我有一个选择的复选框项目，我想将它们放入 Bootstrap 5 手风琴元素中。复选框项目在打开时工作正常（选中复选框将项目添加到数组中；取消选中它们将从数组中删除项目），但是当我将它们放入手风琴元素中时，它们不起作用（选中复选框不会执行任何操作；取消选中它们将项目添加到数组中）。

这是代码本身。

<form class = "list">
  <div class="form-check" ng-repeat="x in people_list">
    <a id="{{x.initial}}"></a>
    <input class="form-check-input" type="checkbox" id={{x.id}} ng-click="clickPeople(x.id, x.names)" ng-checked="checkall" ng-model="x.Selected">
    <label class="form-check-label" for={{x.id}}>{{x.names}} ({{x.tag_link_count}})</label>
  </div>
</form>

这是插入到手风琴元素中的代码。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Select Tags to Search For
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <form class = "list">
          <div class="form-check" ng-repeat="x in tags">
        <a id="{{x.initial}}"></a>
          <input class="form-check-input" type="checkbox" id={{x.id}} ng-click="clickPeople(x.id, x.names)" ng-checked="checkall" ng-model="x.Selected">
          <label class="form-check-label" for={{x.id}}>{{x.names}} ({{x.tag_link_count}})</label>
      </div>
    </form>                       
      </div>
    </div>
  </div>
</div>

这个 CodePen 包含我的复选框的工作和非工作示例（我的 JSFiddle 帐户似乎有问题）。

我在类似问题的答案中看到了有关停止点击事件传播的参考资料，但我无法全神贯注于如何使用我找到的示例来解决我的问题。任何帮助/指导将不胜感激。

干杯，比尔

angularjs checkbox bootstrap-5 accordion
1个回答
0
投票

好的，这些是所做的更改列表。

  1. 单击事件，我传递整个对象
    x
    并以名称
    Selected
    维护所选属性，然后使用它来验证该项目是否已选中。
  2. 点击事件，有一个拼写错误，您正在寻找 
    name
    属性，但在对象中它的定义为 
    names
    ，所以我更改了 JS 代码以使用 
    names
    ！
  3. 最后我删除了手风琴外部的代码，这会导致一些奇怪的滚动，应该只有一个元素具有唯一的 ID。

请在下面找到一个工作示例！

var app = angular.module("myApp", []);
var nonYearList = [];
var yearList = [];
var peopleList = [];
var eventList = [];
var holidayList = [];
var otherList = [];
var tagNameList = [];
app.controller("myCtrl", function($scope) {
  $scope.tags = [{
      "id": 2,
      "names": "Clarence Gansemer",
      "type": "2",
      "tag_link_count": "1",
      "initial": "C"
    },
    {
      "id": 6,
      "names": "Dave Anderson",
      "type": "2",
      "tag_link_count": "1",
      "initial": "D"
    },
    {
      "id": 3,
      "names": "Dorothy Strong, Dorothy Gansemer",
      "type": "2",
      "tag_link_count": "2",
      "initial": "D"
    }
  ]
  $scope.clickPeople = function(item) {
    item.Selected = !item.Selected;
    if (item.Selected) {
      tagNameList.push(item.names)
      $scope.tag_names = tagNameList;
    } else {
      var spot = nonYearList.indexOf(item.id);
      if (spot != -1) {
        nonYearList.splice(spot, 1);
      }
      var spot2 = peopleList.indexOf(item.id);
      if (spot2 != -1) {
        peopleList.splice(spot2, 1);
      }
      var spot3 = tagNameList.indexOf(item.names);
      if (spot3 != -1) {
        tagNameList.splice(spot3, 1);
      }

    }

  }

});
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RBT - Tag Search</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <br><br>
  <h4>Checkboxes do not work inside accordion (checked names are not added to Selected Names list (unless they are checked and then un-checked))</h4>
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Select Tags to Search For
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <form class="list">
            <div class="form-check" ng-repeat="x in tags">
              <a id="{{x.initial}}"></a>
              <input class="form-check-input" type="checkbox" id={{x.id}} ng-click="clickPeople(x)" ng-checked="x.Selected" ng-model="x.Selected">
              <label class="form-check-label" for={{x.id}}>{{x.names}} ({{x.tag_link_count}})</label>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div>
    <br>
    <h4>Selected Names</h4>
    <div ng-repeat="name in tag_names"><span style="margin-left:25px;margin-right:5px" class="badge rounded-pill bg-primary"> </span>&ensp;{{name.replace('Unknown','Unknown Year')}}</div>
  </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.