Question

我想在页面上显示许多电话号码，并且每个电话号码最初显示为“短”电话。

<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

Answer 1

我创建了一个指令。

JSFiddle

这里是将根据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);  
    }
}

如何在单击div时删除过滤器

1 个答案: