{"id":26791,"date":"2017-08-31T22:56:42","date_gmt":"2017-08-31T19:56:42","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/angular-js-pass-data-from-form-to-model\/"},"modified":"2020-04-09T23:36:18","modified_gmt":"2020-04-09T20:36:18","slug":"angular-js-pass-data-from-form-to-model","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/javascript\/angular-js-pass-data-from-form-to-model\/","title":{"rendered":"Angular js. Pass data from form to model"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;Angular js. Pass data from form to model&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;4.4.2&#8243; custom_padding=&#8221;0px|||&#8221; hover_enabled=&#8221;0&#8243; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]We will continue to build our angular app, Today we will realize adding data from form to model.<br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/youtu.be\/3SFAh42zXfk&#8221; _builder_version=&#8221;3.0.71&#8243;][\/et_pb_video][et_pb_text _builder_version=&#8221;3.27.4&#8243; border_style=&#8221;solid&#8221;]To make adding data to model from form with angular we need to do this steps:<\/p>\n<ul>\n<li>adding angula directive <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngClick\" target=\"_blank\" rel=\"noopener noreferrer\">ng-click<\/a> to element which data will send to controller while click event. Value of this directive is method name. In our example it is addPlayer().<\/li>\n<li>In controller we need to define method of the $scope object with the same name addPlayer. Also you need pass parameters to this method, namely form data. That&#8217;s why definition of the method will be addPlayer(playerName, playerTeam, playerCountry). Notice, parameters names match with <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngModel\" target=\"_blank\" rel=\"noopener noreferrer\">ng-model<\/a> directives in form input fields.<br \/>\n As you know its purpose to bind data model with $scope object. <\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_dmb_code_snippet title=&#8221;Code lesson&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sIG5nLWFwcD0icGxheWVyc0FwcCI+CiAgICA8aGVhZD4KICAgICAgICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgICAgICAgPHRpdGxlPjwvdGl0bGU+CiAgICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiPgogICAgPC9oZWFkPgogICAgPGJvZHk+CgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciIgbmctY29udHJvbGxlcj0icGxheWVyQ3RybCI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wtbWQtMTIiPgogICAgICAgICAgICAgICAgICAgIDxmb3JtIGNsYXNzPSJmb3JtLWhvcml6b250YWwiPgogICAgICAgICAgICAgICAgICAgICAgICA8bGVnZW5kPtCh0L\/QuNGB0L7QuiDRhNGD0YLQsdC+0LvQuNGB0YLQvtCyPC9sZWdlbmQ+CiAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZm9ybS1ncm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bGFiZWwgZm9yPSJwbGF5ZXJOYW1lIiBjbGFzcz0iY29sLXNtLTQgY29udHJvbC1sYWJlbCI+0JjQvNGPINC40LPRgNC+0LrQsDwvbGFiZWw+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wtc20tOCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBuZy1tb2RlbD0icGxheWVyTmFtZSIgY2xhc3M9ImZvcm0tY29udHJvbCIgaWQ9InBsYXllck5hbWUiIHBsYWNlaG9sZGVyPSLQmNC80Y8g0LjQs9GA0L7QutCwIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj0icGxheWVyVGVhbSIgY2xhc3M9ImNvbC1zbS00IGNvbnRyb2wtbGFiZWwiPtCSINC60LDQutC+0Lkg0LrQvtC80LDQvdC00LUg0LjQs9GA0LDQtdGCPC9sYWJlbD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImNvbC1zbS04Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIG5nLW1vZGVsPSJwbGF5ZXJUZWFtIiBjbGFzcz0iZm9ybS1jb250cm9sIiBpZD0icGxheWVyVGVhbSIgcGxhY2Vob2xkZXI9ItCSINC60LDQutC+0Lkg0LrQvtC80LDQvdC00LUg0LjQs9GA0LDQtdGCIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj0icGxheWVyQ291bnRyeSIgY2xhc3M9ImNvbC1zbS00IGNvbnRyb2wtbGFiZWwiPtCT0YDQsNC20LTQsNC90YHRgtCy0L48L2xhYmVsPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iY29sLXNtLTgiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgbmctbW9kZWw9InBsYXllckNvdW50cnkiIGNsYXNzPSJmb3JtLWNvbnRyb2wiIGlkPSJwbGF5ZXJDb3VudHJ5IiBwbGFjZWhvbGRlcj0i0JPRgNCw0LbQtNCw0L3RgdGC0LLQviI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJmb3JtLWdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iY29sLXNtLTggY29sLXNtLW9mZnNldC00Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxidXR0b24gbmctY2xpY2s9ImFkZFBsYXllcihwbGF5ZXJOYW1lLCBwbGF5ZXJUZWFtLCBwbGF5ZXJDb3VudHJ5KSIgY2xhc3M9ImJ0biBidG4tZGVmYXVsdCI+0JTQvtCx0LDQstC40YLRjDwvYnV0dG9uPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICA8L2Zvcm0+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wtbWQtMTIiPgogICAgICAgICAgICAgICAgICAgIDx0YWJsZSBjbGFzcz0idGFibGUgdGFibGUtaG92ZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8dGhlYWQ+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dHI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRoPtCY0LPRgNC+0Lo8L3RoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0aD7QmtC+0LzQsNC90LTQsDwvdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRoPtCd0LDRhtC40L7QvdCw0LvRjNC90L7RgdGC0Yw8L3RoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgICAgICAgICAgICAgPC90aGVhZD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRib2R5PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRyIG5nLXJlcGVhdD0icGxheWVyIGluIHBsYXllcnMucGxheWVyc09iamVjdHMiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD57e3BsYXllci5uYW1lfX08L3RkPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD57e3BsYXllci50ZWFtfX08L3RkPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD57e3BsYXllci5jb3VudHJ5fX08L3RkPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgICAgICAgICAgICAgPC90Ym9keT4KICAgICAgICAgICAgICAgICAgICA8L3RhYmxlPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgICAgICA8c2NyaXB0IHNyYz0iYW5ndWxhci5qcyI+PC9zY3JpcHQ+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgdmFyIGFwcCA9IGFuZ3VsYXIubW9kdWxlKCJwbGF5ZXJzQXBwIiwgW10pOwoKICAgICAgICAgICAgdmFyIG1vZGVsID0gewogICAgICAgICAgICAgICAgcGxheWVyc09iamVjdHM6IFtdCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGFwcC5jb250cm9sbGVyKCJwbGF5ZXJDdHJsIiwgZnVuY3Rpb24oJHNjb3BlKXsKICAgICAgICAgICAgICAgICRzY29wZS5wbGF5ZXJzID0gbW9kZWw7CiAgICAgICAgICAgICAgICAkc2NvcGUuYWRkUGxheWVyID0gZnVuY3Rpb24ocGxheWVyTmFtZSwgcGxheWVyVGVhbSwgcGxheWVyQ291bnRyeSkgewogICAgICAgICAgICAgICAgICAgICRzY29wZS5wbGF5ZXJzLnBsYXllcnNPYmplY3RzLnB1c2goe25hbWU6IHBsYXllck5hbWUsIHRlYW06IHBsYXllclRlYW0sIGNvdW50cnk6IHBsYXllckNvdW50cnl9KTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CiAgICAgICAgPC9zY3JpcHQ+CgogICAgPC9ib2R5Pgo8L2h0bWw+Cg==&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;4.4.2&#8243; hover_enabled=&#8221;0&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sIG5nLWFwcD0icGxheWVyc0FwcCI+CiAgICA8aGVhZD4KICAgICAgICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgICAgICAgPHRpdGxlPjwvdGl0bGU+CiAgICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiByZWw9InN0eWxlc2hlZXQiPgogICAgPC9oZWFkPgogICAgPGJvZHk+CgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciIgbmctY29udHJvbGxlcj0icGxheWVyQ3RybCI+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wtbWQtMTIiPgogICAgICAgICAgICAgICAgICAgIDxmb3JtIGNsYXNzPSJmb3JtLWhvcml6b250YWwiPgogICAgICAgICAgICAgICAgICAgICAgICA8bGVnZW5kPtCh0L\/QuNGB0L7QuiDRhNGD0YLQsdC+0LvQuNGB0YLQvtCyPC9sZWdlbmQ+CiAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iZm9ybS1ncm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bGFiZWwgZm9yPSJwbGF5ZXJOYW1lIiBjbGFzcz0iY29sLXNtLTQgY29udHJvbC1sYWJlbCI+0JjQvNGPINC40LPRgNC+0LrQsDwvbGFiZWw+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wtc20tOCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBuZy1tb2RlbD0icGxheWVyTmFtZSIgY2xhc3M9ImZvcm0tY29udHJvbCIgaWQ9InBsYXllck5hbWUiIHBsYWNlaG9sZGVyPSLQmNC80Y8g0LjQs9GA0L7QutCwIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj0icGxheWVyVGVhbSIgY2xhc3M9ImNvbC1zbS00IGNvbnRyb2wtbGFiZWwiPtCSINC60LDQutC+0Lkg0LrQvtC80LDQvdC00LUg0LjQs9GA0LDQtdGCPC9sYWJlbD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImNvbC1zbS04Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIG5nLW1vZGVsPSJwbGF5ZXJUZWFtIiBjbGFzcz0iZm9ybS1jb250cm9sIiBpZD0icGxheWVyVGVhbSIgcGxhY2Vob2xkZXI9ItCSINC60LDQutC+0Lkg0LrQvtC80LDQvdC00LUg0LjQs9GA0LDQtdGCIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj0icGxheWVyQ291bnRyeSIgY2xhc3M9ImNvbC1zbS00IGNvbnRyb2wtbGFiZWwiPtCT0YDQsNC20LTQsNC90YHRgtCy0L48L2xhYmVsPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iY29sLXNtLTgiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgbmctbW9kZWw9InBsYXllckNvdW50cnkiIGNsYXNzPSJmb3JtLWNvbnRyb2wiIGlkPSJwbGF5ZXJDb3VudHJ5IiBwbGFjZWhvbGRlcj0i0JPRgNCw0LbQtNCw0L3RgdGC0LLQviI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJmb3JtLWdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0iY29sLXNtLTggY29sLXNtLW9mZnNldC00Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxidXR0b24gbmctY2xpY2s9ImFkZFBsYXllcihwbGF5ZXJOYW1lLCBwbGF5ZXJUZWFtLCBwbGF5ZXJDb3VudHJ5KSIgY2xhc3M9ImJ0biBidG4tZGVmYXVsdCI+0JTQvtCx0LDQstC40YLRjDwvYnV0dG9uPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgICAgICAgICA8L2Zvcm0+CiAgICAgICAgICAgICAgICA8L2Rpdj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wtbWQtMTIiPgogICAgICAgICAgICAgICAgICAgIDx0YWJsZSBjbGFzcz0idGFibGUgdGFibGUtaG92ZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8dGhlYWQ+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dHI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRoPtCY0LPRgNC+0Lo8L3RoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0aD7QmtC+0LzQsNC90LTQsDwvdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRoPtCd0LDRhtC40L7QvdCw0LvRjNC90L7RgdGC0Yw8L3RoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgICAgICAgICAgICAgPC90aGVhZD4KICAgICAgICAgICAgICAgICAgICAgICAgPHRib2R5PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRyIG5nLXJlcGVhdD0icGxheWVyIGluIHBsYXllcnMucGxheWVyc09iamVjdHMiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD57e3BsYXllci5uYW1lfX08L3RkPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD57e3BsYXllci50ZWFtfX08L3RkPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx0ZD57e3BsYXllci5jb3VudHJ5fX08L3RkPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgICAgICAgICAgICAgPC90Ym9keT4KICAgICAgICAgICAgICAgICAgICA8L3RhYmxlPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgoKICAgICAgICA8c2NyaXB0IHNyYz0iYW5ndWxhci5qcyI+PC9zY3JpcHQ+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgdmFyIGFwcCA9IGFuZ3VsYXIubW9kdWxlKCJwbGF5ZXJzQXBwIiwgW10pOwoKICAgICAgICAgICAgdmFyIG1vZGVsID0gewogICAgICAgICAgICAgICAgcGxheWVyc09iamVjdHM6IFtdCiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGFwcC5jb250cm9sbGVyKCJwbGF5ZXJDdHJsIiwgZnVuY3Rpb24oJHNjb3BlKXsKICAgICAgICAgICAgICAgICRzY29wZS5wbGF5ZXJzID0gbW9kZWw7CiAgICAgICAgICAgICAgICAkc2NvcGUuYWRkUGxheWVyID0gZnVuY3Rpb24ocGxheWVyTmFtZSwgcGxheWVyVGVhbSwgcGxheWVyQ291bnRyeSkgewogICAgICAgICAgICAgICAgICAgICRzY29wZS5wbGF5ZXJzLnBsYXllcnNPYmplY3RzLnB1c2goe25hbWU6IHBsYXllck5hbWUsIHRlYW06IHBsYXllclRlYW0sIGNvdW50cnk6IHBsYXllckNvdW50cnl9KTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSk7CiAgICAgICAgPC9zY3JpcHQ+CgogICAgPC9ib2R5Pgo8L2h0bWw+Cg==[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221; hover_enabled=&#8221;0&#8243;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We will continue to build our angular app, Today we will realize adding data from form to model. To make adding data to model from form with angular we need to do this steps: adding angula directive ng-click to element which data will send to controller while click event. Value of this directive is method [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[256,219],"tags":[278,230],"class_list":["post-26791","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials","tag-angular-en","tag-javascript-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular js. Pass data from form to model - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"We will continue to build our angular app, realizing adding data from form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular js. Pass data from form to model - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"We will continue to build our angular app, realizing adding data from form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-31T19:56:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-09T20:36:18+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Angular js. Pass data from form to model\" \/>\n<meta name=\"twitter:description\" content=\"We will continue to build our angular app, realizing adding data from form.\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"Angular js. Pass data from form to model\",\"datePublished\":\"2017-08-31T19:56:42+00:00\",\"dateModified\":\"2020-04-09T20:36:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/\"},\"wordCount\":1271,\"commentCount\":0,\"keywords\":[\"angular\",\"javascript\"],\"articleSection\":[\"JavaScript\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/\",\"name\":\"Angular js. Pass data from form to model - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-31T19:56:42+00:00\",\"dateModified\":\"2020-04-09T20:36:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"We will continue to build our angular app, realizing adding data from form.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/javascript\\\/angular-js-add-data-to-model\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular js. Pass data from form to model\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular js. Pass data from form to model - Kamil Abzalov's blog","description":"We will continue to build our angular app, realizing adding data from form.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/","og_locale":"en_US","og_type":"article","og_title":"Angular js. Pass data from form to model - Kamil Abzalov's blog","og_description":"We will continue to build our angular app, realizing adding data from form.","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-31T19:56:42+00:00","article_modified_time":"2020-04-09T20:36:18+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"Angular js. Pass data from form to model","twitter_description":"We will continue to build our angular app, realizing adding data from form.","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"Angular js. Pass data from form to model","datePublished":"2017-08-31T19:56:42+00:00","dateModified":"2020-04-09T20:36:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/"},"wordCount":1271,"commentCount":0,"keywords":["angular","javascript"],"articleSection":["JavaScript","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/","name":"Angular js. Pass data from form to model - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-31T19:56:42+00:00","dateModified":"2020-04-09T20:36:18+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"We will continue to build our angular app, realizing adding data from form.","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/javascript\/angular-js-add-data-to-model\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"Angular js. Pass data from form to model"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/26791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=26791"}],"version-history":[{"count":9,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/26791\/revisions"}],"predecessor-version":[{"id":31923,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/26791\/revisions\/31923"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=26791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=26791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=26791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}