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

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

我需要以何种代码收费才能以编程方式控制下拉列表选择？

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 Dropdown正确设置所选<li>

1 个答案: