Arhn - архитектура программирования

Редактирование объектов ng-repeat

Как вы собираетесь редактировать массив объектов, привязанных к таблице, с помощью ng-repeat?

У меня есть следующий начальный массив.

var students = [{
  "FName": "Tom",
  "LName": "Wilcox"
}, {
  "FName": "Kevin",
  "LName": "Johnson"
}, {
  "FName": "Annebelle",
  "LName": "Smith"
}, {
  "FName": "Kelly",
  "LName": "Masters"
}, {
  "FName": "Phillip",
  "LName": "Smith"
}, ];

Затем я помещаю двух учеников во второй массив и добавляю новое свойство «Оценка» следующим образом:

var testTakers = [];
var s;
for (s = 0; s < students.length; s++) {
  if (students[s].LName == "Smith") {
    students[s].Grade = "";       // New Grade Property
    testTakers.push(students[s]);
  }
}
$scope.TestTakers = testTakers;

Я добавляю новое свойство «Оценка» к двум выбранным объектам и привязываюсь к таблице с помощью ng-repeat. Свойство Grade привязано к текстовому полю для редактирования.

<table class="table-striped">
<tbody>
  <tr ng-repeat="student in TestTakers">
    <td class="col-md-2">{{student.FName}}</td>
    <td class="col-md-2">{{student.LName}}</td>
    <td class="col-md-2">
      <input type="text" size="2em" ng-bind="Grade" style="text-align:center" />
    </td>
  </tr>
</tbody>

Когда я ввожу оценки в текстовые поля, Angular не сохраняет эти значения. Моя цель — добавить оценки к двум новым объектам ученика, а затем отправить их обратно на сервер.

Работающий образец Plunker находится здесь. Заранее благодарю за любую помощь в этом!


  • Ваша цель показать всех студентов или только Смитов? 03.01.2015

Ответы:


1

Вам нужно использовать ng-model вместо ng-bind, чтобы настроить двустороннюю привязку. с пользовательским вводом в текстовое поле и привязанной моделью представления.

<input type="text" size="2em" ng-model="student.Grade"  class="text-center" />

Plnkr

Примечание: поскольку у вас уже загружен CSS-файл boostrap, вы можете просто использовать существующее правило CSS text-center вместо встроенного стиля, чтобы указать style="text-align:center".

02.01.2015
  • спасибо за изучение этого. Где вы можете разветвить и обновить мой плункер? Я добавил ng-модель, но все еще не работает. 03.01.2015
  • А вот пример с обновленным, показанным при нажатии кнопки «Сохранить». plnkr.co/edit/HrFnZduZoO75fcCBzf5u?p=preview 03.01.2015
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..