1

このアプリケーションは、ライティング コンテストを実行するためのものです。コーディネーターは、エントリーを審査員に割り当てて、審査員に審査してもらいます。サーバーから取得した 3 つのデータ セット、審査員リスト、エントリ リスト、および 2 つを結び付ける課題リストがあります。入力フィールドの数は可変である可能性があります...審査員が 4 つのエントリを審査することに同意した場合、4 つの入力があります...7 つの場合は 7 つです。すべて正常に機能していますが、エントリに関する限りのみです数値を入力してデータを更新できます。
ここで、リストをチェックして entryID が有効な ID であることを確認し、画面に 1 つまたは 2 つのフィールドを表示して、コーディネーターが正しいエントリを入力したことを認識できるようにします。

HTML の関連セクション

<div ng-app>
   <div id="assignment" ng-controller="AssignData" ng-init="JudgeID=107;CategorySelect='MS';PublishSelect='P'">
      <div ng-show="loaded">
         <form class="entryform ng-cloak" name="assignform" ng-submit="sendForm()">
            <p>Entry numbers assigned to this judge</p>
            <p ng-repeat="assign in (formassigns =(assigns | filter:AssignedJudge))">
               <input type="text" ng-model="assign.entryid" required/>
               {{entries.authorname}} {{entries.entrytitle}} 
            </p>
            <button type="submit">Save Assignments</button>
            <p>This will keep the assignments attached to this judge. 
               You will be able to send all of your assignments to all
               of your judges when you are finished.</p>
         </form>
      </div>
   </div>
</div>

私が把握できていない部分は、ユーザーがentries.entryidにあるentryidを入力したときに、entries.authornameとentries.entrytitleを表示させる方法です。

assigns と entry はどちらも JSON を使用したレコードの配列です

assigns は、assigns.id、assigns.judgeid、assigns.entryid で構成される JSON です。

エントリは、entrys.entryid、entries.entrytitle、entries.authorname で構成される JSON です。

assigns が到着したとき、entryid は空です。フォームは entryid を入力するために使用され、入力されたときに、そのエントリのタイトルと作成者名をその横に表示できるようにしたいと考えています。

4

1 に答える 1

1

注: この回答の最後にいくつかの重要な情報を追加しました。ですから、どうするか決める前に最後まで読んでください。

ルックアップを行う何かを行う必要があります。

また、他にもいくつかの変更を追加します。主に、繰り返しのアイテムを実際に検証できるようにするためです。

（以下の疑似コードの後に​​私がしたことの要約があります）。

<div ng-app>
   <div id="assignment" ng-controller="AssignData" 
        ng-init="JudgeID=107;CategorySelect='MS';PublishSelect='P'">
      <div ng-show="loaded">
         <form class="entryform ng-cloak" name="assignform" ng-submit="sendForm()">
            <p>Entry numbers assigned to this judge</p>
            <p ng-repeat="assign in (formassigns =(assigns | filter:AssignedJudge))"
               ng-form="assignForm">
               <input type="text" ng-model="assign.entryid" 
                  ng-change="checkEntryId(assign, assignForm)"
                  name="entryid" required/>
               <span ng-show="assignForm.entryid.$error.required">required</span>
               <span ng-show="assignForm.$error.validEntry">
                   {{assignForm.$error.validEntry[0]}}</span>
               {{assign.entry.authorname}} {{assign.entry.entrytitle}} 
            </p>
            <button type="submit">Save Assignments</button>
            <p>This will keep the assignments attached to this judge. 
               You will be able to send all of your assignments to all
               of your judges when you are finished.</p>
         </form>
      </div>
   </div>
</div>

次に、コントローラーに次のような関数を追加します (サーバーから値を取得するために作成した $http またはサービスを必ず挿入してください)。

$scope.checkEntryId = function(assign, form) {
   $http.get('/CheckEntry?id=' + assign.entryid,
      function(entry) {
         if(entry) {
           assign.entry = entry;
           form.$setValidity('validEntry', true);
         } else {
           form.$setValidity('validEntry', false, 'No entry found with that id');
         }
      }, function() {
           form.$setValidity('validEntry', true, 'An error occurred during the request');
           console.log('an error occurred');
      });
};

上記の基本的な考え方:

  • 繰り返し要素に ng-form を使用して、これらの動的部分の検証を可能にします。
  • アイテムとネストされたフォームを渡すことができる関数を作成します。
  • その関数で、AJAX 呼び出しを行い、エントリが有効かどうかを確認します。
  • 応答に基づいて有効性を確認し、関数に渡したネストされたフォームで $setValidity を呼び出します。
  • ネストされたフォームのスパン (または何か) で ng-show を使用して、検証メッセージを表示します。
  • また、チェックしたエントリを表示用に繰り返しオブジェクトに割り当てます。（必要に応じて別の配列を使用することもできますが、おそらく不必要に複雑になるでしょう）。

それが役立つことを願っています。

編集：その他の考え

  1. 呼び出しを $timeout またはある種のスロットリング関数でラップして、エントリ ID チェックが yoru サーバーにスパムを送信するのを防ぐことができます。これは完全にあなた次第の実装の詳細です。
  2. これがあちこちで行うチェックである場合は、おそらくそれを行うためのディレクティブを作成する必要があります。考え方は非常に似ていますが、ngModelController の $parser 内でチェックを行います。
  3. 上で示した方法では、モデルの entryid が無効であっても実際には更新されます。これは通常、大したことではありません。そうである場合は、カスタム検証ディレクティブである「その他の考え #2」で提案したものを使用することをお勧めします。

カスタム ディレクティブを介した検証に関する詳細情報が必要な場合は、しばらく前にブログ エントリを作成しました。

于 2013-03-24T00:46:22.260 に答える