将 Angular JS ui-bootstrap 下拉切换绑定到 ng-model答案

【问题标题】：Bind Angular JS ui-bootstrap dropdown toggle to ng-model将 Angular JS ui-bootstrap 下拉切换绑定到 ng-model
【发布时间】：2013-12-21 10:12:12
【问题描述】：

我正在尝试在表单上使用 angularjs bootstrap 下拉切换，并且我需要能够将所选项目绑定回模型以在我的应用程序中创建新的“组织”。

这是我用来创建所有控件的 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 代码 sn-p，其中包括“状态”和货币，两者都使用 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>

Status 中采用的方法效果很好，但我无法让 Currency 的下拉控件正常工作。有什么建议吗？

【问题讨论】：

你能用你的代码发布一个 plunker 吗？排除故障会容易得多。

标签： html angularjs data-binding angular-ui-bootstrap

【解决方案1】：

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

我怀疑这里 data-ng-controller 的值应该是

currencyDropDownButtonCtrl

【讨论】：

【解决方案2】：

这是一个较晚的响应，但这里是 plunker 来完成此操作。请注意，控制器中包含所有国家/地区数据的模型没有所有国家/地区的 ID。相反，我只为模型中的前 9 个国家添加了 id 值（未在排序的下拉列表中看到）。因此，您可以选择中国、印度和巴西进行测试。

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


  }
];

【讨论】：

【解决方案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 模板示例复制/粘贴。

【讨论】：