Question

我正在尝试在表单上使用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代码片段，其中包含for“Status”和for for Currency，两者都使用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>

状态中采用的方法运行良好，但我无法让Currency的下拉控件工作。有什么建议吗？

Answer 1

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

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

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模板示例的复制/粘贴。

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

3 个答案: