Angularjs Dropdown Multiselect를 사용하여 count로 드롭 다운 값을 표시하는 방법은 무엇입니까?

Question

AngularJS Dropdown Multiselect - 옵션마다 맞춤 템플릿을 검색하십시오.

내 쿼리의 솔루션은 내가 아래의 코드를 사용하고 있다면, 그것은 내 응용 프로그램의 뷰에 반영되지 않습니다 AngularJS와 드롭 다운 다중 선택의 문서의 위의 URL을 사용하는 것입니다 발견

:

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

나는 수를 추가하여 acheive 할 :

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

어떤 제안 또는 누락 된 링크?

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

Answer 1

아래 해결 방법을 찾아보십시오. 다음은 내가 한 변화들입니다.

1. 변경 기준 miltiselect 라이브러리 this에 (최신)

2. 추가 된 템플릿에 할당 된 컨트롤러 MainCtrl 만든 내 주요 응용 프로그램 모듈

3. 에 의존성과 'angularjs-dropdown-multiselect' 경우
4. 선택한 옵션을 유지하기 위해 $scope에 추가 속성 ($scope.example19model = [];)을 추가했습니다. 이 당신을 위해 작동하는 경우

은 알려주세요 :)

이

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

여러 입력을 선택하는 데 도움이 select2 라이브러리를 사용할 수 있습니다.

라이브 데모는 link을 확인하십시오.

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