[英]AngularJS truncate ng-option values from select menu
我有一个Angular Bootstrap select插件应用于我的选择菜单,它将所选菜单项呈现为以下内容:
<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> <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;
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.