使用jQuery与AngularJS实现下拉框动态更新：点击按钮切换选项

嗨，我来帮你搞定这个需求！其实核心思路就是利用AngularJS的双向绑定特性，把下拉选项和一个数组数据绑定，点击按钮时更新数组，视图就会自动刷新，完美匹配你要的效果。

步骤1：编写HTML模板 #

先把按钮和下拉框的结构写好，用ng-repeat来渲染下拉选项：

<!-- 触发更新的按钮 -->
<button ng-click="updateDropdown()">切换下拉框内容</button>

<!-- 下拉框（这里用常见的Bootstrap下拉样式举例，你可以根据自己的UI框架调整） -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown">
    选择选项
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <!-- 用ng-repeat循环渲染每个选项 -->
    <li ng-repeat="item in dropdownItems">
      <a data-action="{{item.action}}">{{item.text}}</a>
    </li>
  </ul>
</div>

步骤2：在控制器中实现更新逻辑 #

接下来在AngularJS控制器里初始化数据，并写好updateDropdown()方法，点击按钮时更新下拉数据：

angular.module('myApp', [])
.controller('DropdownController', function($scope) {
  // 初始化下拉数据（可以留空或者设默认值）
  $scope.dropdownItems = [];

  // 按钮点击触发的更新方法
  $scope.updateDropdown = function() {
    // 直接把数组更新成你需要的内容
    $scope.dropdownItems = [
      { action: '100', text: '100' }
    ];
    // 如果之后需要多个选项，直接往数组里加对象就行，比如：
    // $scope.dropdownItems = [
    //   { action: '100', text: '100' },
    //   { action: '200', text: '200' }
    // ];
  };
});

关键细节说明 #

• 双向绑定自动刷新：AngularJS会自动监听$scope.dropdownItems的变化，一旦数组更新，视图会立刻重新渲染，完全不用手动去操作DOM，这比原生JS操作DOM要省心太多。
• 匹配你要的HTML结构：通过{{item.action}}绑定data-action属性，生成的HTML就是你要的<li><a data-action="100">100</a>格式。
• 扩展性强：如果之后需要切换不同的下拉内容，只需要修改updateDropdown()里的数组内容即可，非常灵活。

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