Как правильно добавлять элементы в ангуляре?

Question

[KOPC1886]

Всем привет!

Правильно ли добавлять элементы вот так

if($('#selected_accessApplication_'+access.originalObject.id).length == 0)
                {
                    $('#selectedAccessApplication').append('<div class='selected'></div>')
                }

или правильнее добавлять как то через scope ?

Answer 1

[Александр]

$scope.items = [1,2,3];
$scope.items.push(4);

<div ng-repeat="item in intems">{{item}}</div>
<button ng-click="items.push(5)">add</button>

Comments

[KOPC1886]

OneFive
а если у меня форма



то как мне сериализовать форму и отправить все данные из инпутов на сервер?

[KOPC1886]

OneFive и как мне допустим добавлять новые div с инпутами? получается ведь только через append?

Answer 2

[Сергей Протько]

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

В вашем же случае правильнее было бы использовать ng-repeat и дата байндинг. Собственно если я правильно понимаю то, что вы хотите сделать - только так вам это и нужно делать иначе смысл использования ангуляра теряется. У вас никакой изоляции в итоге, работа с какими-то странными переменными, логика работы приложения связывается с представлением.... словом... фу

Comments

[KOPC1886]

а если у меня форма то как мне сериализовать форму и отправить все данные из инпутов на сервер?

[Сергей Протько]

дата байндинг. Вы в контроллере пихаете в скоуп объект, а во вьюшках мэпите проверти на филды вашей формы. Ангулар все разрулит при помощи директивы ngModel. В итоге когда пользователь нажмет submit мы можем это дело отловить и у нас уже будут все данные в виде JSON объекта.

Сериализовывать формы так же не нужно - просто отправляем JSON и в Content-Type запроса прописываем тип. Если вы хотите использовать formdata вместо кашерного JSON то в интерцепторе разруливаем и преобразовываем.

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

Словом... перед тем как пробовать ангулар на вкус - читайте документацию, смотрите примеры... просто так брать и использовать подобные инструменты нельзя. Это фреймворк а не библиотека с парой методов.

[KOPC1886]

Сергей Протько: А как мне сделать тогда в такой ситуации то?
У меня есть scope вида
$scope.selectedCategory.editors.push({
'id': user.originalObject.id,
'label': user.originalObject.label
});
Мне нужно в него добавлять нового пользователя и проверять на уникальность, чтобы не было дубляжей.
Во вьюхе у меня так


{{editor.label}}

[Сергей Протько]

KOPC1886: оборачивайте в тег code ради бога. Читать же невозможно.

Вы пробовали почитать документацию? Посмотреть на реализацию простенького TodoMVC?

В вашем случае проще было бы сделать так:
$scope.selectedCategory.editors.push(user.originalObject);

Я не знаю бизнес логики того что вы собираетесь делать.

Еще раз повторюсь - потратте пару вечеров что бы разобраться с ангуляром а не пытайтесь что-то сделать методом тыка.

[KOPC1886]

Сергей Протько: я так делал, но как тогда сделать проверку на уникальность, чтобы не добавлять один и тот же объект два раза?

[Сергей Протько]

KOPC1886: а это уже вам решать. Есть indexOf, есть some у массива... просто делаете проверку и все. Потом до вас дойдет вынести все это дело в сервисы и т.д.

[KOPC1886]

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

[Сергей Протько]

KOPC1886: вы можете свой колбэк задавать. Короче тогда рекомендую вам еще и с JS разобраться.