Geek Answers Handbook

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

I am trying to use the angularjs drop-down list in the form, and I need to be able to bind the selected item to the model for the new "organization" in my application.

Here is my js module that I use 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 is my start code for my CreateNewOrganisation controller

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

and finally here is our html code snippet that includes both "Status" and 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 adopted in the status works well, but I can not get the drop-down control for the work of the Currency. Any suggestions?

+6
source share
3 answers
 <div class="dropdown" data-ng-controller="dropDownButtonCtrl">

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

 currencyDropDownButtonCtrl
+2
source

This is a late answer, but nonetheless is a plunker to accomplish this. Please note that the controller model containing all country data does not have an identifier for all countries. Most likely, I added only id values ​​for the first 9 countries in the model (NOT HOW TO SEE IN THE DROBION, which is sorted). Thus, you can choose China, India and Brazil for testing.

  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(); }); } ];
+1
source

For everyone who is only interested in the template:

 <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 hidden input with the ng-model parameter, as usual, and use ng-click to bind the model to a given value, for example, from ng-repeat . The rest of the markup is copy / paste from the sample ui-boostrap template.

+1
source

More articles:


All Articles