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

时间:2017-05-08 16:52:52

标签: javascript angularjs angularjs-directive

我是角色新手,我正在使用HERE中的角度js-dropdown-multi select模块。

我正在尝试根据第一个下拉选项来填充第二个下拉列表,我在这里遇到的第一个问题是当我选择单个项目全部被选中时,第二个当我尝试控制所选择的一个时我看到[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 = {

    };

});

1 个答案:

答案 0 :(得分:1)

您需要设置idProp设置,以便AngularJS Dropdown Multiselect知道数据的唯一ID是什么:

SELECT DISTINCT
ID, post_title
, post_content
,(SELECT meta_value FROM wp_postmeta WHERE wp_postmeta.meta_key = 'lv_listing_lat' AND wp_postmeta.post_id = wp_posts.ID) AS "lv_listing_lat"
,(SELECT meta_value FROM wp_postmeta WHERE wp_postmeta.meta_key = 'lv_listing_lng' AND wp_postmeta.post_id = wp_posts.ID) AS "lv_listing_lng"
,(SELECT group_concat(wp_terms.name separator ', ') 
    FROM wp_terms
    INNER JOIN wp_term_taxonomy on wp_terms.term_id = wp_term_taxonomy.term_id
    INNER JOIN wp_term_relationships wpr on wpr.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id
    WHERE taxonomy= 'listing_category' and wp_posts.ID = wpr.object_id
) AS "Listing Category"
,(SELECT group_concat(wp_terms.name separator ', ') 
    FROM wp_terms
    INNER JOIN wp_term_taxonomy on wp_terms.term_id = wp_term_taxonomy.term_id
    INNER JOIN wp_term_relationships wpr on wpr.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id
    WHERE taxonomy= 'listing_location' and wp_posts.ID = wpr.object_id
) AS "Listing Location"
FROM wp_posts
WHERE post_type = 'lv_listing' 
ORDER BY
post_title
, post_content

您正在连接项变量和字符串字符串,这就是您看到$scope.example14settings = { scrollable: true, enableSearch: true, displayProp: 'type1', idProp: 'type1', };

的原因

以下代码将显示item

的值
[Object object]