我想在页面上显示许多电话号码,并且每个电话号码最初显示为“短”电话。
<div ng-controller="MyCtrl">
<div ng-click="showFull()">{{phone1 | short}}</div>
<div ng-click="showFull()">{{phone2 | short}}</div>
<div ng-click="showFull()">{{phone3 | short}}</div>
<div ng-click="showFull()">{{phone4 | short}}</div>
<div ng-click="showFull()">{{phone5 | short}}</div>
</div>
对应的angularjs代码:
angular.module("app", [])
.filter("short", function() {
return function(input) {
return input.toString().substring(0,3) +"...";
};
})
.controller("MyCtrl", function($scope) {
$scope.phone1 = 1111111;
$scope.phone2 = 2222222;
$scope.phone3 = 3333333;
$scope.phone4 = 4444444;
$scope.phone5 = 5555555;
$scope.showFull = function() {
???
}
});
您可以看到我不知道如何定义showFull
方法。
如何定义它,或提供任何其他简单的解决方案(例如写一个指令)?
PS:这是一个有效的演示:http://jsbin.com/gobohuwa/1/edit
答案 0 :(得分:2)
我创建了一个指令。
这里是将根据div的切换状态应用shortFilter
的链接功能。我还实现了scope.$watch
函数,以便对模型的更改仍将应用于该指令。这是一个粗略的代码,但我对性能并不确定。
function link(scope, element) {
var isFilterLabel = true;
scope.$watch("model", function() {
updateText();
});
element.on('click', function(event) {
isFilterLabel = !isFilterLabel;
updateText();
});
var updateText = function() {
console.log(scope.model);
var text = isFilterLabel ? shortFilter(scope.model) : scope.model;
element.text(text);
}
}