显示 AngularJS 下拉多选检查器

Question

我使用 AngularJS Dropdown Multiselect 制作了一个简单的下拉列表，我想在页面中显示 ID 所检查的名称，但它只显示 ID。

我该怎么做？

在我的 GitHub 代码下面或里面： GitHub: all code here to download

Html 页面：index.html
Angular 应用："MyApp.js"

DropDown 指令：AngularJS 下拉多选

Html 页面：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 应用："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

用这个更新你的 angularjs-dropdown-multiselect.js 文件的 getFindObj(id) 函数..

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

希望这能解决您的问题:)

显示 AngularJS 下拉多选检查器

Show AngularJS Dropdown Multiselect checkeds

javascript

angularjs

angularjs-directive