我是否可以使用Angular指令来创建3个独立的下拉列表，其中填充了来自一个控制器的不同数组？

Question

假设我在一个视图上有3个下拉列表。这三个下拉列表的格式相同，但它们从同一控制器的3个独立数组中获取数据。

<!-- Adults -->
<div class="col-md-3">
    <div class="form-group">
        <label>Adults (12+)</label>
        <select class="form-control" ng-model="selectedAdult" ng-options="adult for adult in adults" ng-change="populatePassengerCombos()">
        </select>
    </div>
</div>

<!-- Children -->
<div class="col-md-3">
    <div class="form-group">
        <label>Children (2-11)</label>
        <select class="form-control" ng-model="selectedChild" ng-options="child for child in children" ng-change="populatePassengerCombos()">
        </select>
    </div>
</div>

<!-- Infants -->
<div class="col-md-3">
    <div class="form-group">
        <label>Infants (0-1)</label>
        <select class="form-control" ng-model="selectedInfant" ng-options="infant for infant in infants" ng-change="populatePassengerCombos()">
        </select>
    </div>
</div>

我可以像这样创建一个指令：

'use strict';

angular.module('angular10App')
.directive('passengerCombo', function () {
    return {
        templateUrl: 'app/common/passengerCombo/passengerCombo.html',
        restrict: 'EA',
        replace: true,
        scope: {

        },
        link: function (scope, element, attrs) {
            scope.label = attrs.label;
        }
    };
});

模板：

<div class="col-md-3">
 <div class="form-group">
    <label>{{label}}</label>
    <select class="form-control" ng-model="" ng-options="" ng-change="populatePassengerCombos()">
    </select>
</div>

​

并像这样将标签传递给它：

<passenger-combo label="Adult (12+)"></passenger-combo>

<passenger-combo label="Children (2-11)"></passenger-combo>

<passenger-combo label="Infants (0-1)"></passenger-combo>

但是我如何让它使用正确的ng-model和ng-options呢？ng-change对于所有三个都是相同的。

下面是控制器：

//Adult combo
var maxAdults = maxPassengers;
var minAdults = 1;
$scope.adults = $filter('range')($scope.adults, minAdults, maxAdults);
$scope.selectedAdult = 1;

//Children combo    
var maxChildren = maxPassengers - $scope.selectedAdult;
var minChildren = 0;
$scope.children = $filter('range')($scope.children, minChildren, maxChildren);
$scope.selectedChild = 0;

//Infant combo    
var maxInfants = $scope.selectedAdult;
var minInfants = 0;
$scope.infants = $filter('range')($scope.infants, minInfants, maxInfants);
$scope.selectedInfant = 0;

range是一个自定义筛选器，它返回一个填充下拉列表的数组。它的工作方式与预期一致。

编辑:我把ng-model和ng-options改成了下面的代码：

HTML

<passenger-combo label="Adult (12+)" ng-model="selectedAdult" items="adults"></passenger-combo>

<passenger-combo label="Children (2-11)" ng-model="selectedChild" items="children"></passenger-combo>

<passenger-combo label="Infants (0-1)" ng-model="selectedInfant" items="infants"></passenger-combo>

指令

angular.module('angular10App')
.directive('passengerCombo', function () {
    return {
        templateUrl: 'app/common/passengerCombo/passengerCombo.html',
        restrict: 'EA',
        replace: true,
        scope: {
            items: '=',
            ngModel: '='
        },
        link: function (scope, element, attrs, ctrl) {
            scope.label = attrs.label;
        }
    };
});

模板

<div class="col-md-3">
<div class="form-group">
    <label>{{label}}</label>
    <select class="form-control" ng-model="ngModel" ng-options="item for item in items">
    </select>
</div>

​

但是我不知道如何让共享函数工作(populatePassengerCombos())？

我已经试过了，但还是不能工作。添加到指令作用域

scope: {
            populatePassengerCombos: '&'
        },

并传递到指令中

<passenger-combo label="Adult (12+)" ng-model="selectedAdult" items="adults" populate-passenger-combos="populatePassengerCombos()"></passenger-combo>

下面是函数populatePassengerCombos

//Populate passenger combos
    $scope.populatePassengerCombos = function () {

        //Adults combo
        $scope.adults = $filter('range')($scope.adults, minAdults, (maxPassengers - $scope.selectedChild - $scope.selectedInfant));

        //Children combo
        $scope.children = $filter('range')($scope.children, minChildren, (maxPassengers - $scope.selectedAdult - $scope.selectedInfant));

        //Infant combo
        $scope.infants = $filter('range')($scope.infants, minInfants, (maxPassengers - $scope.selectedAdult - $scope.selectedChild));
        if ($scope.infants.length > 5) {
            $scope.infants = $filter('range')($scope.infants, minInfants, 4);
        }
        if ($scope.selectedAdult < 4) {
            $scope.infants = $filter('range')($scope.infants, minInfants, $scope.selectedAdult);
        }
        if ((maxPassengers - $scope.selectedAdult - $scope.selectedChild) === 0) {
            $scope.infants = $filter('range')($scope.infants, minInfants, 0);
        }
    }

Answer 1

只需向populatePassengerCombos()函数传递一个对应于适当年龄组的参数。例如:populatePassengerCombo(成人)或populatePassengerCombo(儿童)

然后在该函数中使用条件语句

 $scope.populatePassengerCombo = function(age) {
  if (age  == 'adult') {
   do something
  }
  else if (age == 'children') {
    do something else
  }
}

这就是你要问的吗？