Làm thế nào để hiển thị các giá trị thả xuống với số lượng bằng cách sử dụng Angularjs Dropdown Multiselect?

Question

AngularJS Dropdown Multiselect - Tìm kiếm mẫu tùy chỉnh cho mỗi tùy chọn.

tôi đã tìm thấy các giải pháp truy vấn của tôi sẽ được sử dụng url trên các tài liệu của AngularJS Dropdown Multiselect nhưng nếu tôi đang sử dụng mã dưới đây, nó không phản ánh trên quan điểm của ứng dụng của tôi:

$scope.example19settings = { 
    template: '<b>{{option.name}}</b>' 
}; 

tôi muốn đạt được nó bằng cách thêm một số:

$scope.example19settings = { 
    template: '<b>{{option.name}}({{option.count}})</b>' 
}; 

Mọi góp ý hoặc liên kết thiếu?

$scope.extraSettings = { 
    settings: { 
     selectedToTop: true, 
     styleActive: true, 
     /*template: '<b>{{option.label}}</b>'*/ 
     scrollable: true, 
     scrollableHeight: 200, 
     showEnableSearchButton: true   
    } 
}; 

Answer 1

Vui lòng tìm giải pháp làm việc bên dưới. Sau đây là những thay đổi tôi đã làm.

1. Thay đổi tài liệu tham khảo nếu miltiselect thư viện để this (mới nhất)

2. gia tăng các 'angularjs-dropdown-multiselect' như phụ thuộc vào mô-đun của tôi chính ứng dụng

3. Tạo một bộ điều khiển MainCtrl, giao nó vào mẫu
4. Đã thêm một thuộc tính bổ sung ($scope.example19model = [];) vào $scope để giữ các tùy chọn đã chọn.

Hãy cho tôi biết, nếu làm việc này cho bạn :)

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.example19model = []; 
 
    $scope.example19data = [{ 
 
    id: 1, 
 
    name: "David", 
 
    count: 20 
 
    }, { 
 
    id: 2, 
 
    name: "Jhon", 
 
    count: 30 
 
    }, { 
 
    id: 3, 
 
    name: "Lisa", 
 
    count: 40 
 
    }, { 
 
    id: 4, 
 
    name: "Nicole", 
 
    count: 50 
 
    }, { 
 
    id: 5, 
 
    name: "Danny", 
 
    count: 60 
 
    }]; 
 

 
    $scope.example19settings = { 
 
    template: '<b>{{option.name}} ({{option.count}})</b>' 
 
    }; 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> 
 
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/dist/angularjs-dropdown-multiselect.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
    <div ng-dropdown-multiselect="" options="example19data" selected-model="example19model" extra-settings="example19settings"></div> 
 
    {{example19model}} 
 
    </div> 
 
</div>

Answer 2

Bạn có thể sử dụng thư viện select2 giúp để chọn nhiều đầu vào.

Kiểm tra điều này link để xem bản trình diễn trực tiếp.

<h3>Array of strings</h3> <ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color"> <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match> <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search"> {{color}} </ui-select-choices> </ui-select> <p>Selected: {{ctrl.multipleDemo.colors}}</p>