访问 AngularJS UI-选择选定的值答案

【问题标题】：Accessing AngularJS UI-Select selected value访问 AngularJS UI-选择选定的值
【发布时间】：2018-01-10 11:39:30
【问题描述】：

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

我目前的工作是设置ng-model="ctrl.ngModel"，但是我将无法访问下拉选择的值。

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

controller.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'
    };
  }

【问题讨论】：

标签： javascript angularjs drop-down-menu ui-select

【解决方案1】：

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

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

【讨论】：