AngularJS извлекается из объекта на основе ввода в входе ng-repeat

Question

Это приложение предназначено для проведения конкурса на запись. Coodinators назначают записи судьям для их суждения. У меня есть три набора данных, которые я извлекаю с сервера, список судей, список записей и список назначений, который связывает эти два вместе. Может быть переменное количество полей ввода ... если судья согласился судить 4 записи, будет 4 входа ... если 7, то 7. У меня все работает нормально, но только в том случае, если номер входа может быть введен и данные обновлены.
Теперь я хотел бы подтвердить, что идентификатор entry является допустимым идентификатором, проверив список, а также отображает поле или два на экране, чтобы координатор знал, что они набрали правильную запись.

Соответствующий раздел 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.authorname и entries.entrytitle отображаться, когда пользователь в который находится в entry.entryid.

правопреемников и записи являются массивы записей с использованием JSON

присваивает это JSON из assigns.id, assigns.judgeid, assigns.entryid.

записей является JSON из entries.entryid, entries.entrytitle, entries.authorname

Когда приходит правопреемников, EntryID пуст. Форма используется для заполнения ввода и когда она заполняется, я хотел бы показать рядом с ней заголовок и имя автора для этой записи.

Answer 1

ПРИМЕЧАНИЕ. Я добавил важную информацию в конце этого ответа. Поэтому, пожалуйста, прочитайте до конца, прежде чем вы решите, что вы собираетесь делать.

Вам нужно будет что-то сделать, чтобы посмотреть вверх.

Также несколько других изменений, которые я добавил бы, в основном, чтобы вы могли фактически проверить элементы в своем повторении.

(Ниже приведено описание того, что я сделал после кода 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-форму на повторяющихся элементах, чтобы можно было проверить эти динамические части.
• Создайте функцию, через которую вы можете передать свой элемент и свою вложенную форму.
• В этой функции сделайте свой вызов AJAX, чтобы узнать, действительна ли запись.
• Проверьте достоверность на основе ответа и вызовите $ setValidity в вашей вложенной форме, которую вы передали функции.
• Используйте ng-show на пролете (или что-то еще) в вашей вложенной форме, чтобы отобразить ваши сообщения проверки.
• Кроме того, назначьте свою отмеченную запись для повторного объекта для отображения.(вы можете использовать отдельный массив, если хотите, я полагаю, но это, вероятно, будет излишне сложным).

Я надеюсь, что это поможет.

EDIT: Другие мысли

1. Вы можете обернуть вызов в $ тайм-аут или какой-то функции дросселирующего предотвратить проверку идентификатора записи от спам Yoru сервера. Это деталь реализации, которая полностью зависит от вас.
2. Если это чек, который вы делаете повсюду, вы, вероятно, захотите создать директиву для этого. Идея была бы очень похожей, но вы проверите проверку внутри парсера $ на ngModelController.
3. Метод, показанный выше, по-прежнему будет фактически обновлять ввод модели, даже если он недействителен. Это обычно не большое дело. Если это так, вы захотите пойти с тем, что я предложил в «другой мысли № 2», которая является специальной директивой проверки.

Если Вам необходима дополнительная информация о проверке с помощью пользовательских директив I did a blog entry on that a while back