綁定Angular JS ui-bootstrap下拉切換到ng-model

Question

我想在表單上使用angularjs引導程序下拉開關，我需要能夠將選定的項目綁定回新的「組織」模型，在我的應用程序。

這裏是我的js模塊我使用創建我的所有控件：

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

這是我爲我的CreateNewOrganisation控制器啓動代碼

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

最後，這是我的HTML代碼片段，其中包括一個「狀態」和貨幣，這兩者都使用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> 

在狀態中採取的方法很好，但我無法獲得貨幣的下拉控制工作。有什麼建議麼？

Answer 1

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

我懷疑數據-NG-控制器這裏的值應該是

currencyDropDownButtonCtrl 

Answer 2

這是一個遲到的反應但儘管如此這裏是plunker做到這一點。請注意，包含所有國家/地區數據的控制器中的模型沒有所有國家/地區的ID。相反，我只爲模型中的前9個國家添加了id值（不像在已排序的DROPDOWN中見過）。所以你可以選擇中國，印度和巴西進行測試。

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

任何有興趣在模板中唯一的解決辦法：

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

您使用與ng-model集就像你通常會隱藏輸入，並使用ng-click到模型結合給定值，從例如ng-repeat。其餘的標記是從ui-boostrap模板示例中複製/粘貼的。