AngularJS下拉多选翻译文本和smartButtonTextConverter答案

【问题标题】：AngularJS Dropdown Multiselect Translation-texts and smartButtonTextConverterAngularJS下拉多选翻译文本和smartButtonTextConverter
【发布时间】：2017-01-12 06:59:22
【问题描述】：

我正在使用 AngularJS 下拉多选 (http://dotansimha.github.io/angularjs-dropdown-multiselect/#/)

什么时候使用 smartButtonTextConverter 它将文本转换为我选择的项目，但是当我使用翻译文本来更改按钮的默认值时，smartButtonTextConverter 停止工作并开始显示 1 Checked, 2 Checked...

我的 HTML 代码

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <br>
      <div ng-dropdown-multiselect="" options="projectData" selected-model="projectModel"
           extra-settings="projectsettings" translation-texts="projectText"></div>
      </div>
  </div>
</div>
</div>

JS代码：

 $scope.projectModel = [];
   $scope.projectData = [
            {id: 1, label: "TMS"},
            {id: 2, label: "LMS"},
            {id: 3, label: "NLMS"}
            ];

        $scope.projectsettings = {
            smartButtonTextConverter: function(itemText, originalItem) {
                return itemText;
            },
            enableSearch : true,
            scrollable : true
        };

        $scope.projectText = {
            buttonDefaultText:"Select Project"
        };

【问题讨论】：

标签： angularjs multi-select

【解决方案1】：

您需要将smartButtonMaxItems 属性添加到extra-settings。

$scope.projectsettings = {
    smartButtonMaxItems: 3,
    smartButtonTextConverter: function(itemText, originalItem) {
        return itemText;
    },
    enableSearch : true,
    scrollable : true
};

检查下面的代码sn-p

angular
  .module('app', ['angularjs-dropdown-multiselect'])
  .controller('DefaultController', DefaultController);

DefaultController.$inject = ['$scope'];

function DefaultController($scope) {
  $scope.projectModel = [];
  $scope.projectData = [{
    id: 1,
    label: "TMS"
  }, {
    id: 2,
    label: "LMS"
  }, {
    id: 3,
    label: "NLMS"
  }];

  $scope.projectsettings = {
    smartButtonMaxItems: 2,
    smartButtonTextConverter: function(itemText, originalItem) {
      return itemText;
    },
    enableSearch: true,
    scrollable: true
  };

  $scope.projectText = {
    buttonDefaultText: "Select Project"
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://rawgit.com/dotansimha/angularjs-dropdown-multiselect/master/src/angularjs-dropdown-multiselect.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="app">
  <div ng-controller="DefaultController">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2">
          <br>
          <div ng-dropdown-multiselect="" options="projectData" selected-model="projectModel" extra-settings="projectsettings" translation-texts="projectText"></div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：