AngularJS根据ng-repeat输入中的条目从对象中检索

Question

此应用程序用于运行写作比赛。协调人将参赛作品分配给评委，由他们来评判。我从服务器检索了三组数据，一个裁判列表、一个条目列表和一个将两者联系在一起的分配列表。输入字段的数量可以是可变的……如果评委同意评判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>

我还没能弄清楚的部分是如何做条目。作者名和条目。当用户键入entries.entryid中的entryid时，会显示Entrytitle。

赋值和条目都是使用JSON的记录数组

assignments是由赋值组成的JSON。id分配。judgeid assigns.entryid。

entries是由条目组成的JSON。entryid,条目。entrytitle, entries.authorname

当assign到达时，entryid为空。这个表单是用来填写entryid的，当它被填写后，我希望能够在它旁边显示该条目的标题和作者名。

Answer 1

注意:我在这个答案的末尾添加了一些重要的信息。所以，在你决定你要做什么之前，请把它读完。

你需要做一些事情来查找。

我还想添加一些其他更改，主要是为了让您可以实际验证repeat中的项。

(下面是我在psuedo代码之后所做的总结)。

<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。
• 在嵌套表单的span(或其他东西)上使用ng-show来显示验证消息。
• 另外，为显示目的，将选中的条目分配给重复对象。(你可以使用一个单独的数组如果你想，我想，但这可能会变得不必要的复杂)。

我希望这对你有帮助。

编辑:其他想法

1. 您可能希望将调用包装在$timeout或某种节流函数中，以防止输入id检查向服务器发送垃圾邮件。这是一个完全由你决定的实现细节。
2. 如果这是一个你到处都在做的检查，你可能想要创建一个指令来做它。这个想法是非常相似的，但是你要在ngModelController上的$parser中进行检查。
3. 我上面展示的方法仍然会更新模型的entryid，即使它无效。这是通常没什么大不了的。如果是的话，你会想要用我在"其他想法#2"中建议的，这是一个自定义验证指令。

如果你需要更多关于自定义指令验证的信息，我之前在博客上写过一篇文章