1

此应用程序用于举办写作比赛。协调员将条目分配给评委，让他们评判。我从服务器检索到三组数据，一个裁判列表、一个条目列表和一个将两者联系在一起的分配列表。可以有可变数量的输入字段...如果法官同意判断 4 个条目，则将有 4 个输入...如果 7，则 7。我所有这些都可以正常工作，但仅限于条目可以输入数字并更新数据。
现在我想通过检查列表来确认 entryID 是一个有效的 ID，并在屏幕上显示一个或两个字段，以便协调员知道他们输入了正确的条目。

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>

我无法弄清楚的部分是如何在用户输入entryid 中的entryid 时显示entry.authorname 和entry.entrytitle。

assigns 和 entries 都是使用 JSON 的记录数组

assigns 是由 assigns.id、assigns.judgeid、assigns.entryid 组成的 JSON。

entries 是由 entries.entryid、entry.entrytitle、entry.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 回答