2017-05-08 59 views
0

我是angular的新手,我使用HERE中的角度js-dropdown-multi select模塊。在angularjs中填充第一個下拉式多選第一個下拉式選擇

我想根據第一個下拉選擇來填充第二個下拉列表,我在這裏面臨的第一個問題是當我選擇單個項目時,所有選擇都被選中,第二個當我嘗試控制選定的一個時我見[Object object],這是什麼意思?

任何幫助,非常感謝。

Plunker Demo

HTML:

<div ng-dropdown-multiselect="" 
    options="example14data" 
    events="eventSettings" 
    selected-model="example14model" 
    extra-settings="example14settings"> 
</div> 

<div ng-dropdown-multiselect="" 
    options="example15data" 
    selected-model="example15model" 
    extra-settings="example15settings"> 
</div> 

的JavaScript

var app = angular.module('plunker', ['angularjs-dropdown-multiselect']); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.example14model = []; 
    $scope.example14settings = { 
     scrollable: true, 
     enableSearch: true, 
     displayProp: 'type1' 
    }; 

    $scope.eventSettings={ 
    onItemSelect: function (item) { 
     console.log('selected: '+item); 
      } 
    } 

    $scope.example14data = [ 
     { 
     "type1":"A", 
     "servers":[ 
      { 
      "type2":"a" 
      }, 
      { 
      "type2":"b" 
      }, 
      { 
      "type2":"c" 
      } 
      ] 
     }, 
     { 
     "type1":"B", 
     "servers":[ 
      { 
      "type2":"d" 
      }, 
      { 
      "type2":"e" 
      }, 
      { 
      "type2":"f" 
      } 
      ] 
     }, 
     { 
     "type1":"C", 
     "servers":[ 
      { 
      "type2":"g" 
      }, 
      { 
      "type2":"h" 
      }, 
      { 
      "type2":"i" 
      } 
      ] 
     }, 
     ]; 


    $scope.example15model = []; 
    $scope.example15settings = { 
     scrollableHeight: '200px', 
     scrollable: true, 
     enableSearch: true, 
     selectionLimit:1, 
     displayProp: 'id' 
    }; 

    $scope.example15data = []; 

    $scope.example3settings = { 

    }; 

}); 
+0

這裏的值是普拉克https://plnkr.co /編輯/ dzWCuepCWtBCJvnfFPx7?p =預覽 – Praveen

+0

這應該是怎麼做的,究竟是什麼?現在第一個下拉菜單似乎不能正常工作;即如果我選擇'b',它會導致'a','b',*和*'c'全部**被檢查,即使它只說「1檢查」。檢查倍數不可能出現。 – Claies

回答

1

您需要設置idProp設置,以便AngularJS下拉多選知道數據的唯一ID是什麼:

$scope.example14settings = { 
    scrollable: true, 
    enableSearch: true, 
    displayProp: 'type1', 
    idProp: 'type1', 
}; 

你串接項目變量和串串這就是爲什麼你看到的[Object object]

將下面的代碼顯示項目

$scope.eventSettings={ 
    onItemSelect: function (item) { 
    console.log('Selected:'); 
    console.log(item); 
    } 
} 
相關問題