Записать данные с inputs в array, и показать
Есть две кнопки (Add, Show).
При нажатии на первую кнопку показывает форму с тремя инпутами (name, secondname, e-mail) и кнопкой Save. При нажатии на сохранить оно должно беречь data с inputs в array и очистить все inputs. При нажатии на кнопку Show должны отображаться items, которые были сохранении в форме но только имя, а уже при нажатии на определенный элемент должен выскакивать pop-up с подробной информацией (все данные из формы). Также должна быть нумерация (чтобы на странице не выводилось более 5 items). Я сделал так, а дальше уже не знаю как, не подскажите? Буду очень благодарен! <div class="container text-center" ng-app="myApp" ng-controller="Ctrl"> <button class="btn btn-default" ng-click="myFuncAdd()">ADD</button> <button class="btn btn-default" ng-click="myFuncInfo()">SHOW</button> <div ng-show="showMeAdd" ng-app="myInputs"> <form name="myForm" novalidate> <p> <p> <input class="form-control" type="text" placeholder="Firstname" name="name" ng-model="name" required> <br> <span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid"> <span ng-show="myForm.name.$error.required">Name is required.</span> </span> </p> <p> <input class="form-control" type="text" placeholder="Secondname" name="secondname" ng-model="secondname" required> <br> <span style="color:red" ng-show="myForm.secondname.$dirty && myForm.secondname.$invalid"> <span ng-show="myForm.secondname.$error.required">Secondname is required.</span> </span> </p> <p> <input class="form-control" type="email" name="email" ng-model="email" placeholder="Email" > <br> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span> </p> <button ng-disabled="myForm.name.$dirty && myForm.name.$invalid || myForm.email.$dirty && myForm.email.$invalid || myForm.secondname.$dirty && myForm.secondname.$invalid" class="btn btn-default" ng-click="myFuncAddInfo() addItem(name,secondname, email)">Save</button> </p> </form> </div> <div ng-show="showMeInfo"> <p> Names: <div ng-repeat="item in list.items"> {{item.name}} {{item.secondname}} {{item.email}} </div> </p> </div> </div> <!-- end main buttons --> var myApp = angular.module("myApp", []); myApp.controller("Ctrl", function($scope) { $scope.showMeAdd = false; $scope.showMeInfo = false; $scope.myFuncAdd = function() { $scope.showMeAdd = !$scope.showMeAdd; } $scope.myFuncInfo = function() { $scope.showMeInfo = !$scope.showMeInfo; } /* to array */ var model = { items: [] }; $scope.list = model; $scope.addItem = function(name, secondname, email) { $scope.list.items.push({ Name: name, Secondname: secondname, Email: email }); } }); </script> |
Скоро релиз второго Ангуляра, а вы все $scope да ng-controller
https://github.com/rwwagner90/angular-styleguide-es6 |
Я бы на твоем месте создал фабрику (.factory()) для хранения своих данных с двумя методами - save и load
angular.module('my-save-factory', [ ]) .factory('saveData', [function () { var store = {}; function save(stateId, state) { store[stateId] = state; } function load() { return store; } return { save: save, load: load }; }]); А вообще не понятно, что у тебя работает что нет, в чем помощь требуется. Думаешь, кто то будет разбираться, сидеть делать из тех кусочков что ты выставил тестовый пример чтоб понять это? Нет, ты его должен был сделать Цитата:
|
Часовой пояс GMT +3, время: 12:26. |