Question

我想要更改的代码段如下：

You have {{255 - (name.length + email.length + textarea.length)}} characters left

255 - name.length + email.length + textarea.length可以在函数中包含，但是当我尝试在控制器中执行此操作时，它不起作用。我可能只是不了解核心概念。可以在此处找到我的完整代码集的链接：http://codepen.io/Travo100/pen/pvRyoa

Answer 1

$scope.left = 255 - $scope.name.length - $scope.email.length - $scope.textarea.length;

然后

<p>You have <span> {{left}} </span> characters left</p>

Answer 2

正如答案中所提到的，在范围上定义函数并在绑定表达式上调用它可以解决问题。但我想指出一些您可能会考虑的其他选择。

Binding to the left function：看看你的控制台，看看这个函数被调用了多少次，即使你什么也没做，应该触发字符的计算。 It affects Angular dirty check performance
Binding to a pre computed property：不要像上面的选项那样对表达式进行函数调用，而是可以监听对于剩下的字符重要的变量，并自动再次计算它们发生的变化，总是更新值。

$scope.$watch('[name,email,textarea]', function (values) { $scope.count = 255; angular.forEach(values, function (val) { $scope.count -= val? val.length : 0; }) }, true);
Create a filter：将计算从控制器移动到一个特定的过滤器，该过滤器接收要测量的字符串和最大字符数：

<强> HTML



<强>的javascript

angular.module('contact', []) .filter('cl', function () { return function (input, size) { input = input || ''; return size - input.length; } })

<强>结论

因此，尝试用使用AngularJS清理我的视图来帮助您，并为您提供某种答案。正如您所看到的，您应该考虑一些选项并权衡哪一个更合适。我个人会尝试坚持使用过滤器的第3个选项，因为它更灵活，可以在你拥有的任何其他视图中重复使用。

Answer 3

在控制器中添加以下内容

$scope.left = function(){
    var totalLength = 255;
    if($scope.name){
        totalLength -= $scope.name.length;
    }

    if($scope.email){
        totalLength -= $scope.email.length;
    }

    if($scope.textarea){
        totalLength -= $scope.textarea.length;
    }

    return totalLength;
};

添加此项以在HTML中呈现函数的输出。

<p>You have <span> {{left()}} </span> characters left</p>

使用AngularJS清理我的视图

3 个答案: