Question

我的页面上有两个下拉列表。它们都具有相同的数据源。我面临的问题是在一个下拉列表中选择一个项目也会影响另一个项目。我可以避免这种情况吗？

HTML：

 <!--Locations Dropdown Begin-->
                    <div style="display:inline-block">
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                <span>{{ selectedItem ? selectedItem.Label : 'SELECT LOCATION' }}</span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li ng-repeat="location in Locations"
                                    <a ng-click="dropboxitemselected(location)">
                                        {{location.Label}}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--Locations Dropdown End-->

plunker

Answer 1

可以将selectedItem存储为数组（或对象）并将数组索引（或对象键）参数添加到ng-click函数

     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        <span>{{ selectedItem[0] ? selectedItem.label[0] : 'SELECT LOCATION' }}</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li ng-repeat="location in Locations">
          <a ng-click="dropboxitemselected(location,0)">
                                    {{location.label}}
          </a>
        </li>
      </ul>

JS

$scope.selectedItem=[];

$scope.dropboxitemselected = function(item, index) {
  $scope.selectedItem[index] = item;
};

// OR

$scope.selectedItem={loc_1:null, loc_2:null};

$scope.dropboxitemselected = function(item, loc) {
  $scope.selectedItem[loc] = item;
};

更改反映在绑定到同一源的所有下拉列表中

1 个答案: