Bind Angular JS UI-Bootstrap-Dropdown-Toggle zu ng-Modell

Question

Ich versuche, die Angularjs Bootstrap Dropdown-Toggle auf einem Formular zu verwenden, und ich muss in der Lage sein, das ausgewählte Element an ein Modell für eine neue "Organisation" zu binden in meiner Bewerbung.

Hier ist mein js Modul ich alle meine Steuerelemente erstellen bin mit:

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' 
}];  
}; 

Hier ist mein Ausgangscode für meine CreateNewOrganisation Controller

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

und schließlich, hier ist mein HTML-Code-Schnipsel, die enthält eine für "Status" und eine für Währung, die beide 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> 

Der im Status verwendete Ansatz funktioniert gut, aber das Dropdown-Steuerelement für die Währung funktioniert nicht. Irgendwelche Vorschläge?

Answer 1

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

Ich vermute, dass der Wert für die Daten-ng-Controller hier

currencyDropDownButtonCtrl 

Answer 2

sein soll Dies ist eine späte Antwort, aber dennoch ist hier die plunker dies zu erreichen. Beachten Sie, dass das Modell im Controller, das alle Länderdaten enthält, keine ID für alle Länder hat. Vielmehr habe ich nur ID-Werte für die ersten 9 Länder im Modell hinzugefügt (NICHT SO GESEHEN IM DROPDOWN, die sortiert sind). Sie könnten also China, Indien und Brasilien testen.

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


    } 
]; 

Answer 3

Für alle Interessierten in einer Vorlage einzige Lösung:

<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> 

Sie verwenden einen versteckten Eingang mit dem ng-model Satz wie gewohnt und verwenden Sie ein ng-click das Modell auf einen bestimmten Wert zu binden, von ein ng-repeat zum Beispiel. Der Rest des Markups ist Kopieren/Einfügen von ui-boattramp Vorlage Beispiel.