CODEWITHSUNDEEP
angularjs
ps0604
ps0604

Reputation: 1071

Set initial label in Angular UI dropdown list

In this plunker I'm trying to get the selection of a list of dropdown lists. The problem is that the dropdowns appear empty (no labels are selected by default, as set in the controller). How to fix this?

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

Upvotes: 1

Views: 1063

Answers (3)

itzmukeshy7
itzmukeshy7

Reputation: 2677

Try this ;)

In app.js replace

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

with 

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

And in index.html replace

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

with

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

Upvotes: 0

oguzhan00
oguzhan00

Reputation: 509

there is the console error: i is not deifned, solution is:

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

also edit button {{row.selection}} .

here is the plunker code without errors.

Upvotes: 0

TomSlick
TomSlick

Reputation: 735

You're missing the row element in your binding

{{row.selection}} instead of {{selection}}

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

Upvotes: 1

Related Questions