Angularjs：返回textarea中剩餘的字符

我是Angualrjs的新手。我正試圖在textarea中顯示剩餘的字符。Angularjs：返回textarea中剩餘的字符

<textarea ng-model="message" ng-maxlength="100"></textarea> 
<div id="characters" ng-model="message"><span>Characters left: {{remaining()}}</span> </div>

這是函數：

this.scope.remaining = function() { 
return this.scope.maxlength - this.scope.message.length;}

我得到的錯誤是：

Error: Error while interpolating: Characters left: {{remaining()}} TypeError: this.scope is undefined

誰能幫助？

來源

2014-01-29 user3214545

「剩餘」功能是在哪裏定義的？你爲什麼要用'這個'。刪除它再試一次。 – Alborz

這是在控制器的上下文中嗎？ –

我認爲你可能會使它比需要的更復雜。試試這個：

在你的控制器：

.controller('myCtrl', function($scope /* other dependencies here */){ 
    ... 
    $scope.maxLength = 100; // this is the max # of chars allowed in the textarea 
    ... 
});

在你的HTML：

<textarea ng-model="message" ng-maxlength="{{maxLength}}"></textarea> 
<div id="characters"> 
    <span>Characters left: {{maxLength - message.length}}</span> 
</div>

雙向的{{maxLength - message.length}}結合將被立即用正確的字符數更新當用戶輸入textarea時剩餘。

來源

2014-01-29 14:16:34 tennisgent

非常好，簡單的解決方案。適用於角1.3。 – Louis

我不得不擺弄一下才能使這個工作。 ng-maxlength =「{{maxLength}}」中的鬍鬚是否有可能是錯誤的？然後它仍然沒有工作 - maxlength是0或其周圍，所以我恢復使用maxlength = 100而不是ng-maxlength。 –

-1

您需要將作用域作爲參數傳遞給函數。

來源

2014-01-29 11:27:22

我認爲this.scope.remaining是在控制器中定義的。而不是使用this.scope.remaining，將$ scope作爲依賴項並執行$ scope.remaining。

如果你分享一個jsFiddle，我們將能夠確切地看到問題是什麼。

來源

2014-01-29 11:27:53

我從來沒有使用JSFiddle，但在這裏我們去... http：//jsfiddle.net/nr6aV/2/。我正在使用typescript not javascript aswell – user3214545

對不起，剛剛使用我的確切代碼編輯了該評論，第一個鏈接錯了 – user3214545

對不起，我不知道typeScript，因此無法在代碼中找到問題。你需要做的是將$ scope作爲參數傳遞給控制器函數，並定義$ scope.remaining而不是this.scope.remaining。我不確定typeScript語法，但我相信你可以弄清楚。 –

偉大的答案，tennisting！然而，最大長度必須在模板中插入用於驗證在踢

下面是用插值小提琴：https://jsfiddle.net/t1fhppc9/

如果鍵入的字符數超過NG-最大長度（$ scope.maxLength的價值），角度清除綁定模型（$ scope.message）。剩餘字符數的度量標準（maxLength - message.length）將不再有效。這可以在上面的小提琴中看到。

爲了處理這種情況，我在範圍中添加了一個函數並將其綁定到模板（很像user3214545的方法）。這樣，最大長度驗證將應用於文本區域，其餘字符度量將告訴您已超出的字符數。

模板：

<div ng-controller="myCtrl"> 
    <textarea 
    ng-model="message" 
    ng-maxlength="{{ maxLength }}"> 
    </textarea> 
    <div> 
    <span>Characters left: {{ remaining() }}</span> 
    </div> 
    If there are more than {{ maxLength }} characters, then a red border will be shown. 
    <div> 
    Message: {{ message }} 
    </div> 
</div>

控制器：

function myCtrl($scope) { 
    $scope.maxLength = 5; 

    $scope.remaining = function() { 
    return $scope.maxLength - angular.element(document).find('textarea')[0].value.length; 
    } 
}

這裏與功能的小提琴：https://jsfiddle.net/zz13p1tm/

Ofcourse，在更現實的情況下，這將是包裹在指令中。範圍和元素都將傳遞給指令。使用隔離作用域，我們還可以控制參數，如最大長度，必需，禁用以及剩餘字符是否應顯示在模板上。

來源

2016-05-10 13:55:58 mvvijesh

Angularjs：返回textarea中剩餘的字符

回答

相關問題