如何使用 Angular-UI 下拉菜单正确设置选定的 <li>

Question

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

<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);
    };

从下拉列表中选择特定项目后，我需要下拉列表显示选择以代替默认 "Open With" 选项。

我需要支付多少代码才能以编程方式控制下拉选择？

Answer 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 代码外什么都不做。

如何使用 Angular-UI 下拉菜单正确设置选定的 <li>

How to properly set selected <li> using Angular-UI Dropdown

html

angularjs

angular-ui-bootstrap