Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Записать данные с inputs в array, и показать (https://javascript.ru/forum/angular/63562-zapisat-dannye-s-inputs-v-array-i-pokazat.html)

hipperman 15.06.2016 11:58

Записать данные с 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>

Casufi 20.06.2016 09:51

Скоро релиз второго Ангуляра, а вы все $scope да ng-controller
https://github.com/rwwagner90/angular-styleguide-es6

krasovsky 20.06.2016 11:01

Я бы на твоем месте создал фабрику (.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
        };
    }]);


А вообще не понятно, что у тебя работает что нет, в чем помощь требуется. Думаешь, кто то будет разбираться, сидеть делать из тех кусочков что ты выставил тестовый пример чтоб понять это? Нет, ты его должен был сделать


Цитата:

Сообщение от Casufi
Скоро релиз второго Ангуляра, а вы все $scope да ng-controller
https://github.com/rwwagner90/angular-styleguide-es6

Даже не знаю, поставить тебе минус за то что пытаешься умничать?)


Часовой пояс GMT +3, время: 10:34.