Question

In this plunker我正在尝试选择下拉列表列表。问题是下拉列表显示为空（默认情况下未选择任何标签，如控制器中所设置）。如何解决这个问题？

的Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {

    $scope.rows = [ {selection: "Sel 1"}, {selection: "Sel 2"} ];

    $scope.selectItem = function(ev,index) {
        var sel = ev.target.textContent;
        $scope.lastSelection = index + " - " + sel;
        $scope.rows[index].selection = sel;
    };

});

HTML

<table>
    <tr ng-repeat="row in rows">      
      <td>
          <div class="btn-group" uib-dropdown>
            <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
                  {{selection}} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" ng-click="selectItem($event,$index)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
               <li role="menuitem">
                  <a href="#" data-value="1" >The first item</a>
                </li>
                <li role="menuitem">
                  <a href="#" data-value="2">Another item</a>
                </li>
                <li role="menuitem">
                  <a href="#" data-value="3">Yet another item</a>
                </li>
            </ul>
          </div>
      </td>
    </tr>
  </table>

  <br/>

  Last selection: {{lastSelection}}

Answer 1

您错过了绑定中的行元素

{{row.selection}}代替{{selection}}

http://plnkr.co/edit/Q5YnByLUKmjkpet2gKWC?p=preview

Answer 2

有控制台错误：我没有确定，解决方案是：

$scope.selectItem = function(ev,index) {
    var sel = ev.target.textContent;
    $scope.lastSelection = index + " - " + sel;
};

还可以修改按钮{{row.selection}}。

这里是没有错误的plunker代码。

Answer 3

试试这个;）

在app.js替换

$scope.lastSelection = i + " - " + sel;

带

$scope.lastSelection = index + " - " + sel;

并在index.html替换

<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body" ng-click="selectItem($event,$index)">
   <li role="menuitem">
     <a href="#" data-value="1" >The first item</a>
    </li>
    <li role="menuitem">
      <a href="#" data-value="2">Another item</a>
    </li>
    <li role="menuitem">
      <a href="#" data-value="3">Yet another item</a>
    </li>
  </ul>

与

 <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
   <li role="menuitem">
     <a href="#" data-value="1" ng-click="selectItem($event,$index)" >The first item</a>
    </li>
    <li role="menuitem">
      <a href="#" data-value="2" ng-click="selectItem($event,$index)" >Another item</a>
    </li>
    <li role="menuitem">
      <a href="#" data-value="3" ng-click="selectItem($event,$index)" >Yet another item</a>
    </li>
  </ul>

在Angular UI下拉列表

3 个答案: