Question

在下面的AngularJS代码中，有一个TextArea和一个span来显示允许的剩余字符。 [允许的总字符数为100]

当我在textarea中键入值时，它会正确显示剩余的字符数。但是，当第一次加载页面时，它没有正确显示 - 它只显示为{{remaining()}}。

当第一次加载页面时，需要进行哪些更改才能使剩余计数显示为100？此外，这段代码中的错误是什么 - 它是否在使用范围？

代码

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js">
</script>

<script type="text/javascript">    
   var TextLimitController= function ($scope) 
   {
    $scope.remaining = function (countryPopulation) {
        return 100 - $scope.message.length;
    };
   };
</script>

</head>

<body ng-app>

     <div ng-controller="TextLimitController">
    <span> Remaining: {{remaining()}}   </span>
    <div>   
        <textarea ng-model = "message">  {{message}} </textarea>
    </div>
    <div>   

</body>

</html>

首次加载

打字后

Answer 1

$scope.message未初始化为某个值，因此当您的视图尝试绑定到$scope.remaining()时，它可能会抛出错误，因为message未定义且无法解析{ {1}}属性。

将.length初始化为空字符串以获得所需的行为：

$scope.message

此外，您应该考虑使用更新版本的角度; 1.0.7 非常已过期，并且自发布以来已经有很多错误修复。

Answer 2

使用本地角度js文件而不是使用cdn

的链接

并开启$ scope.message =＆＃39;＆＃39;

Answer 3

您的代码应该像this，请试一试：

    <html ng-app="App">
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js">
        </script>

        <script type="text/javascript">  
        angular.module('App',[])  
        .controller('TextLimitController',function($scope){
        $scope.message= "";
        $scope.maxLength = 100;
            $scope.remainingFunc = function () {
               $scope.remaining = $scope.maxLength - $scope.message.length;
            };
        $scope.remainingFunc();        
})

        </script>

        </head>

        <body>

             <div ng-controller="TextLimitController">
            <span> Remaining: {{remaining}}</span>
            <div>   
                <textarea ng-init="" message="" ng-model="message" ng-change="remainingFunc()"></textarea>
            </div>
            <div>   

        </body>

        </html>

加载页面时，将显示范围函数名称而不是值

3 个答案: