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? — Ubiquitous Developers, Oct 03 '15 at 12:37
Could you look at this http://stackoverflow.com/a/27810276/2435473 — Pankaj Parkar, Oct 03 '15 at 12:43

score 1 · Accepted Answer · edited Oct 03 '15 at 12:44

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

How to display a scope using dropdown button?

1 Answers1