current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

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?

share|improve this question
    
Can you post a plunker with your code? It'd be a lot easier to troubleshoot. –  yikes Jan 10 '14 at 22:20

2 Answers 2

up vote 1 down vote 
<div class="dropdown" data-ng-controller="dropDownButtonCtrl">

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

currencyDropDownButtonCtrl
share|improve this answer
up vote 0 down vote

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();
      });


  }
];
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.