2016-11-16 8 views
0

フィールドに入力するときに進捗バーを表示する必要があります。テキストフィールドに基づいて、Ionicのanglejの進捗状況が自動的に入力されます

フィールドに基づいて、fillupは自動的にionjでangularjsを使用してプロレスバーを表示する必要があります。

enter image description here

+0

入力したフィールドの数に基づいてパーセンテージを指定しますか?フィールドの検証はありますか?モデルはどのように構造化されていますか? –

+0

私たちは妥当性検査をしていますが、何らかのデータをフォーカスして入力し、その時間内に別のフィールドに行くと、進捗バーに表示する必要があります。妥当性検査を行ったが、進捗状況を示すバーを提示できなかった。サンプルがある場合は、 –

+0

のようにhttp://codepen.io/chriscoyier/pen/xtLcDを入力してください。jqueryにあります。私は角度のjsでしたい。いずれか1つの方法を私に助けてください –

答えて

1

私は、次のcodepen製:

http://codepen.io/anon/pen/ZBBGgj

をあなたが入力の検証に基づいて進捗状況を追跡する必要があります。

function validateInput(input, arrayLength) { 
    console.log(input); 
    if (!input.validated && input.model.length > 3) { 
     vm.validationProgress = vm.validationProgress + (100/arrayLength); 
     input.validated = true; 
     console.log(vm.validationProgress); 
    } else if (input.validated && input.model.length <= 0) { 
     input.validated = false; 
     vm.validationProgress = vm.validationProgress - (100/arrayLength); 
    } 
    } 

このコードは改良することができますが、おそらくよりよい解決策が見つかるはずですが、正しい方向に向けるべきです。

入力がvalidated = trueの場合、その入力緑のprogressboxの色をつけます。

<div ng-repeat="input in vm.inputfields" ng-class="{ 'validated' : input.validated }" class="validation-item"> 
+0

ありがとうStian..Exact私はそれが欲しいしかし、私はhtmlページで入力フィールドコードをしたい、私はjsからHTMLページに追加したくない。私はすべてのフィールドを入力し、100%進歩を示していますが、私はすべてのフィールドをクリアする場合、私は正確な位置ではなく最後の位置からプログレスバーを減らしたいと思います。今どこのフィールドがクリアされているのかは、そのポジションでクリアされているだけです。このシナリオでお手伝いできますか? –

+0

http://codepen.io/kranti/pen/XNjwPP –

+0

Stianに感謝しています.. –

関連する問題