How to display a scope using dropdown button?

Question

I'm new to Angular so don't be mean please. I am trying to display some text depending on a clicked option in dropdown button and I can't get it working. So what's wrong with it? Thanks in advance.

JSfiddle

HTML

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle ng-disabled="disabled">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#/" ng-click="show(first)">Display: First</a></li>
        <li role="menuitem"><a href="#/" ng-click="show(second)">Display: Second</a></li>
      </ul>
    </div>


<div id="separator"></div> 

<div class="col-md-12">
  {{show.first}}
  {{show.second}}
</div>

</div>
</div>

Javascript

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('DropdownCtrl', function ($scope) {

  $scope.show = function(scope) {
      $scope.first = 'First';
      $scope.second = 'Second';
  };

});

you want to display first when first is selected and second when second is selected, right? — Hardik Gondalia
– Hardik Gondalia, Commented Oct 3, 2015 at 12:37

Pankaj Parkar · Accepted Answer · 2015-10-03 12:44:16Z

1

Check this

Controller

var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('DropdownCtrl', function ($scope) {
  $scope.show = function(value) {
      console.log(value);
      $scope.data = value;  
  };
});

HTML:

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle ng-disabled="disabled">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#/" ng-click="show('first')">Display: First</a></li>
        <li role="menuitem"><a href="#/" ng-click="show('second')">Display: Second</a></li>
      </ul>
    </div>  
<div id="separator"></div> 

<div class="col-md-12">
  {{data}}
</div>     
</div>
</div>

Fiddle

edited Oct 3, 2015 at 12:44

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Oct 3, 2015 at 12:40

Hardik Gondalia

3,7276 gold badges39 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

How to display a scope using dropdown button?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related