AngularJS截断选择菜单中的选项值

AngularJS truncate ng-option values from select menu

本文关键字：选项 菜单 选择 AngularJS      更新时间：2023-09-26

我有一个应用于选择菜单的Angular Bootstrap选择插件，它将所选菜单项呈现为以下内容：

            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                <div class="filter-option pull-left">Item with a very long name</div>&nbsp;<div class="caret"></div>
            </button>

我正在尝试开发一个函数，如果所选菜单项名称大于指定长度，该函数将截断该名称。

功能：

            $scope.truncate = function(){
                    var maxLength = 5;
                    $('button .filter-option').text(function(i, text) {
                        if (text.length > maxLength) {
                            return text.substr(0, maxLength) + '...';  
                        }
                    }); 
            }

对Angular模板中的原始选择标记调用的函数：

            <select
                class="nya-selectpicker"
                ng-model="items"
                ng-options="g.name for g in myItems"
                ng-change="truncate()">
                <option value="">Select</option>
            </select>

我的问题：它并没有截断我从菜单中选择的项目；它截断了我模板中两个相邻选择菜单的默认项。

如何更新此函数以截断从菜单中选择的项目？

所以本质上你需要创建一个过滤器。然后，您可以在ng-options中应用此筛选器。

ng-options="(g.name | myFilter) for g in myItems"
myApp.filter('myFilter', function() {
  return function(val) {
    var maxLength = 5;
    if (val > maxLength) {
      return val.substr(0, maxLength) + '...';  
    } else {
      return val;
    }
  };
});

您可以将过滤器应用于数组（我更喜欢前面的例子）

ng-options="g.name for g in myItems | myFilter"
myApp.filter('myFilter', function() {
  var maxLength = 5;
  return function(arr) {
    var returnArr = [];
    for(var i = 0; i < arr.length; i++) {
      (function() {
        var item = {};
        angular.copy(arr[i], item);
        if (item.name > maxLength) {
          item.name = item.name.substr(0, maxLength) + '...';
        }
        returnArr.push(item);  
      })();
    }
    return returnArr;
  };
});
相关文章：