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

mzillmmw 于 11个月前发布在 Angular

关注(0)|答案(1)|浏览(104)

我有一个复选框项目的选择，我想把一个Bootstrap 5 accordian元素。复选框项目在打开时工作正常（选中复选框将项目添加到数组中;取消选中它们将项目从数组中删除），但是当我把它们放在accordian元素中时，它们不工作（选中复选框没有任何作用;取消选中它们将项目添加到数组中）。
下面是代码本身。

<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>

字符串
下面是插入到accordian元素中的代码。

<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

来源：https://stackoverflow.com/questions/77743825/unexpected-checkbox-behavior-in-bootstrap-5-accordion

1条答案

按热度按时间

vnjpjtjt1#

这是所做的更改列表。
1.单击事件，我传递整个对象x，并以Selected的名称维护选定的属性，然后使用此方法验证项目是否选中。
1.点击事件，有一个错字，你正在寻找name属性，但在对象中它已定义为names，所以我改变了JS代码使用names！
1.最后，我删除了accordion外部的代码，这会导致一些wierd滚动，应该只有一个元素具有唯一的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);
      }

    }

  }

});

个字符

赞(0）回复(0）举报 11个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答