Dropdown Checkbox选中选项后关闭且未保存选中状态问题

嘿，刚接触JS和AngularJS就能折腾下拉复选框，已经很棒啦！你遇到的这两个问题其实是新手常踩的小坑，我来帮你捋捋：

第一个问题：勾选复选框时下拉框立即关闭 #

这是因为点击复选框的时候，事件会冒泡到下拉框的触发元素（比如按钮），触发了下拉框的显示/隐藏切换逻辑。解决办法很简单，给复选框添加阻止事件冒泡的操作：

在你的复选框标签里加上 ng-click="$event.stopPropagation()"，这样点击复选框的事件就不会往上传递，也就不会误触下拉框的关闭逻辑了。

第二个问题：再次打开下拉框时选中状态未保存 #

这说明你没有把复选框的选中状态和AngularJS的作用域模型绑定起来。AngularJS是数据驱动的，得让复选框的状态跟着模型走，才能保存住选中状态。

具体修改步骤：

1. 在控制器里定义一个保存筛选选项的数组，每个选项包含标签和选中状态：

// 假设你的控制器是这样的
app.controller('FilterController', function($scope) {
  // 控制下拉框的显示/隐藏
  $scope.isDropdownOpen = false;
  // 定义筛选选项，初始状态都是未选中
  $scope.filterOptions = [
    { label: "选项A", selected: false },
    { label: "选项B", selected: false },
    { label: "选项C", selected: false }
  ];
});

2. 在你的tpl.html里，用ng-repeat渲染选项，并用ng-model绑定每个复选框的选中状态：

<!-- 下拉框触发按钮 -->
<button ng-click="isDropdownOpen = !isDropdownOpen">
  搜索筛选
</button>

<!-- 下拉复选框容器 -->
<div class="dropdown-container" ng-show="isDropdownOpen">
  <div ng-repeat="option in filterOptions">
    <label>
      <input 
        type="checkbox" 
        ng-model="option.selected" 
        ng-click="$event.stopPropagation()"
      >
      {{ option.label }}
    </label>
  </div>
</div>

这样修改后，勾选复选框时，option.selected的值会自动更新，再次打开下拉框时，AngularJS会根据模型的状态渲染复选框的选中状态，而且阻止事件冒泡后，下拉框也不会因为点击复选框而关闭啦。

如果你的代码里有用到第三方UI组件（比如ui-bootstrap的dropdown），那可能需要调整成组件对应的API，但上面的方法是最基础的原生AngularJS解决方案，适合新手理解。

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