60文字を超える入力では、代わりにテキストエリアを使用する

角度を使用して入力文字をカウントできるようにするには、文字数が60を超える場合は、代わりにテキストエリアを使用する必要があります。60文字を超える入力では、代わりにテキストエリアを使用する

私は私が私のスクリプトでこれをやって逃げることができるかもしれないと思った：

//my initial display value 
$scope.display = "this is a particularly long string that i'm using to test this functionality"; 
//storing the length of the display variable 
$scope.charCount = $scope.display.length;

私はその後、inputまたはtextareaを使用するかどうかを判断するためにng-if状態にcharCount変数を使用。

<div id="ctrl_{{field.id}}" ng-controller="controller" data-custom-focus="true" ng-if="charCount <= 60"> 
    <input 
     type="text" 
     ng-bind="display" 
     ng-value="display"> 
</div> 
<div id="ctrl_{{field.id}}" ng-controller="controller" data-custom-focus="true" ng-if="charCount > 60"> 
    <textarea 
     type="text" 
     ng-bind="display" 
     ng-value="display" > 
    </textarea> 
</div>

不思議なことに、どちらの要素もレンダリングされません。私はAngularのことをかなり新しくしているので、問題の内容がわからない。

出典

2017-11-08 Master Yoda

？ – trichetriche

それは働いています。ここを参照してください。両方の条件で同じコントローラを参照する必要があるため、https://plnkr.co/edit/Xq2D8brgN3WxMv10J6pm?p=preview –

@Satpalあなたがそれを感謝する良い方法を提案できるなら、私は角の専門家ではありません。 –

を試してみてくださいng-if

を使用するには、いくつかのboundationsがあるとして、あなたのビューでng-if使用display.lengthの。ただ、両方の要素からng-controller="controller"を削除

<div ng-controller="MyCtrl"> 
<div data-custom-focus="true" ng-if="charCount => 60"> 
    <input 
     type="text" 
     ng-bind="display" 
     ng-value="display"> 
</div> 
<div data-custom-focus="true" ng-if="charCount < 60"> 
    <textarea 
     type="text" 
     ng-bind="display" 
     ng-value="display" > 
    </textarea> 
</div> 
</div>

出典

2017-11-08 12:12:11 hurricane

それは、私はあなたが同じコントローラを2度参照することができなかったことがわかった。乾杯 –

@ MasterYodaいい日マスターを持っています:) – hurricane

いくつかのミス

あなたにここで行わ
ng-bind
削除フォームのdiv ng-controller="controller"

を使用する間違った方法でどの、入力フィールドに ng-bindを使用しています

使用ng-showそして代わりに使用し、親スコープのためのあなたのコントローラを使って、この

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
\t <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('app', []); 
 

 
     app.controller('OneController', function ($scope) { 
 
     $scope.display = 'ssss' 
 
     $scope.changedInput = function (argument) { 
 

 
     } 
 

 
    }); 
 
</script> 
 
</head> 
 
<body ng-controller="OneController"> 
 
    {{aa}} 
 

 
    <div data-custom-focus="true" ng-show="display.length <= 60"> 
 
     <input 
 
     type="text" ng-change = "changedInput()" 
 
     ng-model="display" 
 
     ng-value="display"> 
 
    </div> 
 
    <div data-custom-focus="true" ng-show="display.length > 60"> 
 
     <textarea ng-change = "changedInput()" 
 
     type="text" 
 
     ng-model="display" 
 
     ng-value="display" > 
 
    </textarea> 
 
</div> 
 
Count: {{display.length}} 
 

 
</body> 
 
</html>

出典

2017-11-08 12:05:42

ここには違いはありません。 'charCount'も使用できます。 –

@AmitKumar thats my bad。今、私の答えを確認してください:) –

：

あなたは次のようにそれを使用することができます。それは動作するはずです。

<div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount <= 60"> 
    <input type="text" ng-bind="display" ng-value="display"> 
    </div> 
    <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount > 60"> 
    <textarea type="text" ng-bind="display" ng-value="display"> 
    </textarea> 
    </div>

Plunker

出典

2017-11-08 12:13:54

助けてくれてありがとう。あなたの提案は本当に助けになりました。 –

あなたは1 ng-controllerを使用することができますし、このコントローラの範囲内で入力/ textareaのための条件を置きます。あなたはすべてのケースでテキストエリアを使用し、長さが60以上であれば、あなたのテキストエリアに行を追加しないのはなぜ

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
$scope.display = "this is a particularly long string that i'm using to test this functionality"; 
 
//storing the length of the display variable 
 
$scope.charCount = $scope.display.length; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount <= 60"> 
 
     <input type="text" ng-bind="display" ng-value="display"> </div> 
 
    <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount > 60"> 
 
     <textarea type="text" ng-bind="display" ng-value="display"> </textarea> 
 
    </div> 
 
</div>

出典

2017-11-08 12:16:07 Vivz

私はあなたがコントローラを一度参照する必要があることを認識していませんでした。 –

@ MasterYodaこれを一度宣言し、必要なコードをこのコントローラのスコープ内に入れてもうまくいくでしょう。とにかく喜んで助けになる:) – Vivz

<div id="ctrl_{{field.id}}" data-custom-focus="true" ng-show="display.length <= 60"> 
<input 
    type="text" 
    ng-bind="display" 
    ng-value="display"> 
</div> 
    <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-show="display.length > 60"> 

<textarea 
    type="text" 
    ng-bind="display" 
    ng-value="display" > 
</textarea>

出典

2017-11-08 12:16:50

60文字を超える入力では、代わりにテキストエリアを使用する

答えて

関連する問題