変更内容は同じソースにバインドされたすべてのドロップダウンリストに反映されます

Question

私のページには2回のドロップダウンがあります。どちらも同じデータソースを持っています。 私が直面している問題は、1つのドロップダウンで項目を選択すると、他の項目にも影響します。私はそれを避けることができます。

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クリック

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