Bind Angular JS ui-bootstrap dropdown toggle to ng-model

Question

I am trying to use the angularjs bootstrap dropdown toggle on a form, and i need to be able to bind the selected item back to a model for a new "organisation" in my application.

Here's my js module i'm using to create all my controls:

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

var booleanButtonCtrl = function($scope) {
    $scope.radioModel = true;  
};

var currencyDropDownButtonCtrl = function($scope) {
    $scope.currencies = [{
        id: 1,
        name: 'US Dollar'
    }, {
    id: 2,
    name: 'Euro'
}, {
    id: 3,
    name: 'Australian Dollar'
}];    
};

Here's my starting code for my CreateNewOrganisation controller

function CreateOrganisationController($scope, $http, $window) {
    $scope.newOrganisation = {
        isActive: true,
};

and finally, here's my html code snippet, which includes a for "Status" and a for Currency, both of which use ui-bootstrap...

        <div class="form-group">
            <label class="control-label">Status</label><br />
            <div ng-controller="booleanButtonCtrl">
                <div class="btn-group">
                    <button type="button"
                            class="btn btn-primary"
                            data-ng-model="newOrganisation.isActive"
                            btn-radio="true">
                        Active
                    </button>
                    <button type="button"
                            class="btn btn-primary"
                            data-ng-model="newOrganisation.isActive"
                            btn-radio="false">
                        Dormant
                    </button>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Currency</label>
            <div class="dropdown" data-ng-controller="dropDownButtonCtrl">
                <div class="btn-group">
                    <a class="btn btn-primary dropdown-toggle">Please select<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li ng-repeat="currency in currencies">
                            <a ng-model = "newOrganisation.currency">{{currency.name}}</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

The approach taken in the Status works nicely, but I can't get the dropdown control for Currency to work. Any suggestions?

Can you post a plunker with your code? It'd be a lot easier to troubleshoot. — kl02
– kl02, Commented Jan 10, 2014 at 22:20

dave · Accepted Answer · 2014-01-21 03:28:23Z

2

<div class="dropdown" data-ng-controller="dropDownButtonCtrl">

I suspect the value for data-ng-controller here should be

currencyDropDownButtonCtrl

answered Jan 21, 2014 at 3:28

dave

1,2173 gold badges12 silver badges26 bronze badges

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

Comments

sskasim · Accepted Answer · 2014-08-21 19:00:14Z

This is a late response but nevertheless here is the plunker to accomplish this. Please note that the model in the controller that contains all the countries data does not have an ID for all the countries. Rather I only added id values for the first 9 countries in the model (NOT AS SEEN IN THE DROPDOWN which is sorted). So you could pick China, India and Brazil to test.

    var testController = ['$scope', '$http',
  function($scope, $http) {

    $scope.status = 'loading...';
    $scope.country = "Select Country";
    $scope.data = {
        "locations": {}
    };
    $scope.selectedCountryId = "1";
    $scope.onCountrySelect = function(selectedCountry){
      //$scope.country = selectedCountry.country;
      $scope.selectedCountryId = selectedCountry.id;
    }
  $scope.selectInitial = function(id){
      for (var i = 0; i < $scope.data.locations.countries.length; i++) {
        if ($scope.data.locations.countries[i].id == id)
        {
          return $scope.data.locations.countries[i].country;
        }
      }
      //$scope.country = selectedCountry.country;
    }
    //load JSON data
    $http.get('countries.json')
      .then(function(res) {
        $scope.data.locations.countries = res.data;
        $scope.status = "loaded "+$scope.data.locations.countries.length+" countries.";
        $scope.$apply();
      });


  }
];

Callistino · Accepted Answer · 2016-04-12 23:36:25Z

For anyone interested in a template only solution:

<div class="btn-group" uib-dropdown is-open="status.isopen">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    {{ selected || 'Select an option...' }}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="option in options">
        <a href="" ng-click="selected === null" ng-if="$index === 0">Select an option...</a>
        <a href="" ng-click="selected === option">{{ option }}</a>
        <input type="hidden" name="options" ng-model="selected" required>
    </li>
  </ul>
</div>

You use a hidden input with the ng-model set like you normally would and use an ng-click to bind the model to a given value, from an ng-repeat for example. The rest of the markup is copy/paste from ui-boostrap template example.

Collectives™ on Stack Overflow

Bind Angular JS ui-bootstrap dropdown toggle to ng-model

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related