显示AngularJS Dropdown Multiselect已选中

Question

I was made a simple dropdownList using AngularJS Dropdown Multiselect and II'd like to show in page the names Ids checkeds but it is showing only the IDs.

How can I do It ?

Below or in my GitHub code: GitHub : all code here to download

• Html page: index.html
• Angular app: "MyApp.js"

• DropDown directive: AngularJS Dropdown Multiselect

  Html page: index.html

   <h2>Multiselect dropdown with checkbox in angularjs</h2> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" /> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> <!-- <script src="~/Scripts/angularjs-dropdown-multiselect.js"></script> --> <!-- <script src="~/Scripts/MyApp.js"></script> --> <script src="angularjs-dropdown-multiselect.js"></script> <script src="MyApp.js"></script> <div ng-app="MyApp" ng-controller="multiselectdropdown"> <div class="container" style="margin:50px"> <form class="form-inline" name="myForm" role="form" ng-submit="SubmitData()"> <div class="form-group"> <label>Subscribe for categories : </label> <div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="Categories" selected-model="CategoriesSelected" checkboxes="true"></div> <div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="Categories" selected-model="CategoriesSelected" styleActive="true"></div> <div ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="Categories" selected-model="CategoriesSelected2" styleActive="true"></div> </div> <button type="submit" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-secoundary" ng-click="EnviarSelecionados()">Enviar Selecionados!</button> </form> <div> <h2>Show Selecteds</h2> <br/> <pre ng-repeat="catsel in CategoriesSelected"> Person ID:{{catsel.id}} <br/> Person Name:{{catsel.label}} </pre> </div> <!-- <div style="margin-top:40px" ng-if="SubmittedCategories.length > 0"> --> <!-- <h2>Selected Categories</h2> --> <!-- <table class="table table-responsive table-bordered"> --> <!-- <thead> --> <!-- <tr> --> <!-- <th>ID</th> --> <!-- <th>Category Name</th> --> <!-- </tr> --> <!-- </thead> --> <!-- <tbody> --> <!-- <tr ng-repeat="cat in SubmittedCategories"> --> <!-- <td>{{cat.CategoryID}}</td> --> <!-- <td>{{cat.CategoryName}}</td> --> <!-- </tr> --> <!-- </tbody> --> <!-- </table> --> <!-- </div> --> <div style="margin-top:40px" ng-if="SubmittedCategories.length > 0"> <h2>Selected Categories</h2> <table class="table table-responsive table-bordered"> <thead> <tr> <th>ID</th> <th>Category Name</th> </tr> </thead> <tbody> <tr ng-repeat="cat in SubmittedCategories"> <td>{{cat.CategoryID}}</td> <td>{{cat.CategoryName}}</td> </tr> </tbody> </table> </div> </div> </div> 

Angular app: "MyApp.js"

var app = angular.module('MyApp', ['angularjs-dropdown-multiselect']);
app.controller('multiselectdropdown', ['$scope', '$http', function ($scope, $http) {
    //define object 
    $scope.CategoriesSelected = [];
    $scope.Categories = [];
    $scope.dropdownSetting = {
        scrollable: true,
        enableSearch: true, 
        scrollableHeight : '200px',
        closeOnBlur: false,
        showCheckAll: false,
        checkBoxes: false,
        displayProp: 'label', // se colocar id funciona 
        smartButtonMaxItems: 5
      }
    //fetch data from database for show in multiselect dropdown
    /*$http.get('/home/getcategories').then(function (data) {
        angular.forEach(data.data, function (value, index) {
            $scope.Categories.push({ id: value.CategoryID, label: value.CategoryName });
        });
    })*/

     $scope.Categories = [{id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}];
     $scope.CategoriesSelected2 = [$scope.Categories[0], $scope.Categories[1]];

    //$scope.Categories.push({id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"});
    //post or submit selected items from multiselect dropdown to server
    $scope.SubmittedCategories = [];

    $scope.EnviarSelecionados = function(){
        var result = $scope.CategoriesSelected;
    }


    $scope.SubmitData = function () {
        var categoryIds = [];
        angular.forEach($scope.CategoriesSelected, function (value, index) {
            categoryIds.push(value.id);
        });

        var data = {
            categoryIds: categoryIds
        };

        /*$http({
            method: "POST",
            url: "/home/savedata",
            data:JSON.stringify(data)
        }).then(function (data) {
            $scope.SubmittedCategories = data.data;
        }, function (error) {
            alert('Error');
        })*/
    }
}])

Answer 1

Update your angularjs-dropdown-multiselect.js file's getFindObj(id) function with this..

            function getFindObj(id) {
                var findObj = {};

                if ($scope.settings.externalIdProp === '') {
                    findObj[$scope.settings.idProp] = id;

                } else {
                    findObj[$scope.settings.externalIdProp] = id;
                    angular.forEach($scope.options, function (value, index) {
                        if(value.id == id){
                            findObj.label = value.label;
                        }
                    });
                }

                return findObj;
            }

I hope this will resolve your problem :)