如何使用Angular-UI Dropdown正确设置选中的<li>元素

我来帮你把这个Angular UI Bootstrap下拉框的实现整理清楚，附上完整的代码细节和关键说明：

第一步：HTML模板代码 #

我帮你格式化了代码缩进，让结构更清晰：

<div uib-dropdown class="btn-group">
  <button uib-dropdown-toggle class="btn btn-default">
    Open With <b class="caret"></b>
  </button>
  <ul role="menu" class="dropdown-menu animated fadeIn">
    <li 
      ng-repeat="list in templateList" 
      ng-click="setValue(list)"
      data-ng-model="selectedOption"
    >
      {{list.name}}
    </li>
  </ul>
</div>

第二步：完整的Angular控制器代码 #

你之前的控制器代码没写完，我补全了合理的实现逻辑，包括模拟数据源、选中赋值的方法：

angular.module('yourApp', ['ui.bootstrap'])
.controller('DropdownCtrl', function($scope) {
  // 模拟下拉选项的数据源
  $scope.templateList = [
    { name: 'PDF Viewer', value: 'pdf' },
    { name: 'Image Editor', value: 'image' },
    { name: 'Text Editor', value: 'text' }
  ];

  // 用于存储选中的选项
  $scope.selectedOption = null;

  // 点击下拉选项时的赋值函数
  $scope.setValue = function(list) {
    $scope.selectedOption = list;
    // 这里可以添加选中后的业务逻辑，比如触发文件打开操作
    console.log('选择了打开方式:', list.name);
  };
});

几个关键注意点 #

• 必须确保你的项目已经引入了AngularJS和UI Bootstrap的相关文件（CSS和JS），不然uib-dropdown这类指令会无效
• 在声明Angular模块时，一定要注入ui.bootstrap依赖项，就像上面代码里的angular.module('yourApp', ['ui.bootstrap'])
• uib-dropdown-toggle指令负责触发下拉菜单的展开和收起，不需要额外写点击事件
• ng-repeat遍历templateList生成每个下拉选项，点击时通过setValue方法把选中项绑定到selectedOption上
• 你加的animated fadeIn类是用来给下拉菜单加过渡动画的，要生效的话需要引入Animate.css或者自己写对应的动画样式

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