Показать сообщение отдельно
  #1 (permalink)  
Старый 15.06.2016, 11:58
Новичок на форуме
Отправить личное сообщение для hipperman Посмотреть профиль Найти все сообщения от hipperman
 
Регистрация: 20.12.2015
Сообщений: 8

Записать данные с 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>
Ответить с цитированием