在Angular UI下拉列表中設置初始標籤

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

有控制檯錯誤：我不deifned， 的解決方案是：

$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>