Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Starternh
21 / 4 / 1
Регистрация: 29.05.2013
Сообщений: 81
1

Обновление данных в представлении

22.03.2018, 20:51. Просмотров 582. Ответов 5
Метки нет (Все метки)

Добрый день
Когда я получаю данные с бэкэнда и записываю их в переменную, а затем через ng-repeat вывожу в представлении всё в порядке. Это происходит при первой загрузке страницы. На странице список каких-то элементов. Затем при добавлении нового элемента, я добавляю новый элемент к переменной, в которой все остальные и хочу чтобы представление обновлялось вместе с этой переменной, но почему-то этого не происходит. Вот кусочек кода:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var pl = angular.module('phoneList');
 
pl.controller('ListCtrl', function ($scope, $http) {
 
    $http.get('bookslist').then(function (response) {
        $scope.phones = response.data;   // ПОЛУЧАЕМ ДАННЫЕ 
    });
 
 
    $scope.addNew = function (answerForm) { // МЕТОД, КОТОРЫЙ ДОБАВЛЯЕТ НОВУЮ ЗАПИСЬ
        if(answerForm.$valid){
 
            var book = {  
                name: $scope.name,
                author: $scope.author,
                publish_year: $scope.publish_year,
                description: $scope.description
            };
 
             $scope.phones.push(book); // Добавляю элемент в конец объекта. Он добавляется, но в представлении не выводится
 
            $http.post('addbook', book).then(function (response) { // ТУТ СОХРАНЯЮ В БД
                $scope.errors = response.data;  
            });
            $http.get('bookslist').then(function (response) {  // Здесь я попытался заново получить весь массив данных, но тоже не вышло, хотя данные приходят 
                $scope.phones = response.data;
            });
        }
    };
});
А это шаблон:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
        
<div class="col-md-9 col-md-offset-2">
 
            <ul class="phones"">
                <div class="row" ng-controller="ListCtrl">
                    <li ng-repeat="phone in phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
                        class="thumbnail">
                        <div class="col-md-12">
 
                            <a href="#!/phones/{{phone.id}}" class="thumb">
                                <img ng-src="{{phone.author}}" alt="{{phone.name}}"/>
                            </a>
                            <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
 
                            <p>{{phone.description}}</p>
                            <p style="color:gray;">Дата публикации: {{phone.publish_year}}</p>
                            <div class="col-md-4 col-md-offset-9" style="position:relative; bottom: 70px;">
                                <a href="#!/edit/{{phone.id}}">
                                    <button class="btn btn-info" style="display: inline-block">Редактировать</button>
                                </a>
                                <a href="" ng-click="removeBook(phone.id)" ng-controller="ListCtrl">
                                    <button class="btn btn-danger" style="display: inline-block">Удалить</button>
                                </a>
                            </div>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
Выходит что при первом получении данных всё выводится, а затем если я удаляю элемент или добавляю новый, то данные не обновляются. Подскажите пожалуйста, что не так и как можно исправить?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.03.2018, 20:51
Ответы с готовыми решениями:

Как реализовать обновление данных в SQL через кнопку на Представлении контроллера
Проект называется &quot;Автоматизация продаж малого предприятия&quot;.5 таблиц - 5 контроллеров. Контроллер...

Отображение данных в представлении
Допустим у меня есть несколько запросов в контроллере и я хочу передать их в представление....

Модель данных в представлении
Добрый день! Суть проблемы Есть метод контроллера Table1, в котором из БД отбираются данные и...

Отображение данных в частичном представлении
Добрый день. Возник такой вопрос, есть страница, в ней хочу сделать 2 частичных представления, в 1...

Отображения данных в представлении combobox
Здравствуйте, Создаю модель и связываю ее с представлением combobox connection_db conn_db;...

5
Resume
142 / 132 / 69
Регистрация: 08.11.2013
Сообщений: 768
Записей в блоге: 5
23.03.2018, 23:16 2
а где реализованная функция удаления ?
0
Starternh
21 / 4 / 1
Регистрация: 29.05.2013
Сообщений: 81
24.03.2018, 01:01  [ТС] 3
Javascript
1
2
3
4
5
6
7
8
9
10
    $scope.removeBook = function (id) {
        
          $http.get('remove/' + id); // Запрос на удаление
          $http.get('bookslist').then(function (response) { // А здесь я пытался получить все данные заново, записав в books.
           // Ожидал, что они должны обновиться, но этого не происходит
 
            $scope.books = response.data.data; 
            $route.reload(); // Временное решение обновления данных
        });
    }
Вот она
0
Resume
142 / 132 / 69
Регистрация: 08.11.2013
Сообщений: 768
Записей в блоге: 5
24.03.2018, 11:25 4
Я думаю, что отправлять запрос не нужно для получения данных.
Вы знаете, по какому id удаляете элемент(объект) из массива.
Попробуйте написать вот так:
Javascript
1
2
3
4
5
6
7
$scope.removeBook = function (id) {
        
          $http.get('remove/' + id)
                .then(response => { 
                    $scope.books = $scope.books.filter(e => e.id !== id);
        });
    }
https://developer.mozilla.org/ru/doc...s/Array/filter
0
sau
2087 / 1667 / 285
Регистрация: 22.07.2011
Сообщений: 6,385
Завершенные тесты: 1
24.03.2018, 17:32 5
Проблема в вашем коде , он асинхронный.
$http.get('remove/' + id); // Запрос на удаление , которое , допустим , длиться 5 секунд
через долю милисекунд , не дожидаясь завершения первого , выполняется еще один запрос
$http.get('bookslist')
нет никакой гарантии , что bookslist не отработает быстрее , чем remove. , по этому , данную функцию нужно вызвать в теле
$http.get('remove/' + id).then(...)

Аналогично для addbook , bookslist нужно вызвать только после того , как addbook вернет ответ , т.е внутри http.get('addbook /' + id).then(...)
0
Starternh
21 / 4 / 1
Регистрация: 29.05.2013
Сообщений: 81
24.03.2018, 22:21  [ТС] 6
Спасибо за ответы, частично помогли решить проблему!
Но, как я понял, основная проблема заключалась в том, что в представлении я объявил форму в див элементе с классом ng-controller="ListCtrl", а ul список который выводил элементы, я объявил в другом месте, тоже с дивом с классом ng-controller="ListCtrl". И почему-то из-за этого у меня ничего не работало, но когда я объединил всё в один див, то сразу заработало. Это странно..
0
24.03.2018, 22:21
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.03.2018, 22:21

Обновление базы и ошибка: Обновление невозможно. База данных или объект доступны только для чтения.
Помогите пожалуйста! asp не может обновить базу. Про ошибку говорит Microsoft OLE DB Provider for...

Различия в представлении данных во вьюсе и запросе
При выполнении вьюса данные представлены нормальным образом, т.е. разделение целой части от дробной...

Передача дополнительных данных в строготипизированном представлении
Здравствуйте, есть строготипизированное представление для редактирования объекта, в котором данные...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru