Set initial label in Angular UI dropdown list

Question

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

TomSlick · Accepted Answer · 2016-05-06 14:04:09Z

1

You're missing the row element in your binding

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

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

answered May 6, 2016 at 14:04

TomSlick

7355 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

oguzhan00 · Accepted Answer · 2016-05-06 14:04:59Z

0

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.

edited May 6, 2016 at 14:04

answered May 6, 2016 at 14:02

oguzhan00

5098 silver badges16 bronze badges

1 Comment

oguzhan00 Over a year ago

@ps0604 I update my answer and wrote correct syntax to plunker, please check it.

itzmukeshy7 · Accepted Answer · 2016-05-06 14:08:42Z

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>

Collectives™ on Stack Overflow

Set initial label in Angular UI dropdown list

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related