用angularjs中的第一个下拉列表填充第二个下拉列表多选

Question

I am new to angular and I am using the angular js-dropdown-multi select module from HERE .

I am trying to fill the second drop-down based on first drop-down selection, the first issue I am facing here is when I select single item all are getting selected and second when I try to console the selected one I see [Object object] , what does that mean?

Any help is much appreciated.

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 = {

    };

});

Answer 1

You need to set the idProp setting so that AngularJS Dropdown Multiselect knows what the unique id of the data is:

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

You are concatenating the item variable and a string string which is why you are seeing the [Object object]

The following code will display the value of item

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