访问 AngularJS UI 选择所选值

Question

目前我有多个下拉指令，它们共享相同的下拉值数组。当我做出选择时，它将更新下拉列表所选值的其余部分，以及如何为其余下拉列表提供唯一选择。

我目前的解决方法是设置ng-model="ctrl.ngModel"但是我将无法访问下拉所选值。

下拉菜单.html

<div>
  <ui-select name='' ng-model="ctrl.ngModel.selected" theme="bootstrap" class='expiry admin-expiry'
    append-to-body='true'
    reset-search-input='true'
    on-select="ctrl.update()">
    <ui-select-match placeholder="">{{$select.selected.value}}</ui-select-match>
    <ui-select-choices repeat="choice in ctrl.choices | filter: $select.search"
      position='down'>
      <span ng-bind-html="ctrl.trustAsHtml(choice.value)"></span>
    </ui-select-choices>
  </ui-select>
</div>

控制器.js

  function ColDropdownDirective() {
    return {
      restrict: 'EA',
      scope: {
        ngModel: '=',
        choices: '='
      },
      controller: ['FxoUtils', function(_) {
        var ctrl = this;
        this.trustAsHtml = function(value) {
          return _.trustAsHtml(value);
        };
        this.update = function() {
          console.log(ctrl.ngModel.selected);
        };
      }],
      controllerAs: 'ctrl',
      bindToController: true,
      templateUrl: 'js/fxo/admin/thresholdconfig/common/common.col.dropdown.html'
    };
  }

Answer 1

您可以将您的选择复制到一个由三个唯一副本组成的数组中。然后，您可以在模板中访问这些选项，例如：choice in ctrl.choicesArr[0]或[1]或[2]。您还需要使用三个不同的ng-model来表示三个下拉列表的选定值。

function ColDropdownDirective() {
    return {
        restrict: 'EA',
        scope: {
            ngModel: '=',
            choices: '='
        },
        controller: ['FxoUtils', function(_) {
            var ctrl = this;
            this.choicesArr = [
                angular.copy(this.choices),
                angular.copy(this.choices),
                angular.copy(this.choices),
            ];
            this.trustAsHtml = function(value) {
                return _.trustAsHtml(value);
            };
            this.update = function() {
                console.log(ctrl.ngModel.selected);
            };
        }],
        controllerAs: 'ctrl',
        bindToController: true,
        templateUrl: 'js/fxo/admin/thresholdconfig/common/common.col.dropdown.html'
    };
}