如何使用 Angular-UI Dropdown 正确设置选定的 <li>答案

【问题标题】：How to properly set selected <li> using Angular-UI Dropdown如何使用 Angular-UI Dropdown 正确设置选定的 <li>
【发布时间】：2018-04-16 18:28:25
【问题描述】：

我有一个下拉控件，实现如下：

<div uib-dropdown="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控制器代码如下：

    $scope.templateList = [{id:1, name: 'H2O'}, {id:2, name: 'R'}, {id: 3, name: "Python"}];

    $scope.selectedOption = $scope.templateList[1];

    $scope.template = {};
    $scope.setValue = function(list) {
        $scope.template.template_id = list.id;
        $scope.template.template_name = list.name;
        console.log("selected item:  " + list.name);
    };

从下拉列表中选择特定项目后，我需要下拉列表来显示选择以代替默认的“打开方式”选项。

要以编程方式控制下拉选择，我需要收取什么代码费用？

【问题讨论】：

标签： angularjs html angular-ui-bootstrap

【解决方案1】：

即这应该工作：

    <div uib-dropdown="dropdown" class="btn-group">
         <button uib-dropdown-toggle="" class="btn btn-default">
{{template.template_name || '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)"
           >{{list.name}}</li>
         </ul>
    </div>

注意：我从 <li> 中删除了 ng-model，因为它除了执行无用的 js 代码之外什么都不做。

【讨论】：