Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   работа с формами (https://javascript.ru/forum/angular/56949-rabota-s-formami.html)

DennisMatveyev 11.07.2015 16:26

работа с формами
 
добрый день, всем!:)
есть такая тема:
<!DOCTYPE html>
<html ng-app='store'>
<head>
	<title>NG</title>
		
</head>

<body>

<div id='products' ng-controller="ProductController as products">
	
	<button type="button" ng-click='products.toggleProducts()'>Products</button>
	<p>Number of products: {{products.number}}</p>
	
	<form name='addProduct' ng-submit='products.addProduct()'>
		<input type="plain/text" placeholder='Enter name' ng-model='products.new_product_name'/>
		<input type="plain/text" placeholder='Enter price' ng-model='products.new_product_price' />
		<input type="submit" value='Add' />			
	</form>
	
	<div id='products-list'>
		<div ng-repeat='product in products.products'>
			<ul>
				<li>{{ product.name }}: {{ product.price | currency }}</li>
			</ul>
		</div>
		
		<ul>
			<li>{{ products.new_product_name }}: {{ products.new_product_price | currency }}</li>
		</ul>
		
	</div>

</div>

<div id='customers' ng-controller="CustomerController as customers">
	
	<button type="button" ng-click='customers.toggleCustomers()'>Customers</button>
	<p>Number of customers: {{customers.number}}</p>
	
	<div id='customers-list'>
		<div ng-repeat='customer in customers.customers'>
			<ul>
				<li>Customer: {{ customer.name | uppercase }}, city: {{ customer.city }},
					age: {{ customer.age }} - <img ng-src='{{ customer.ava }}' /></li>
			</ul>
		</div>
	</div>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</body>

</html>


and JS:
(function() {
	var app = angular.module('store', []);

	app.controller("ProductController", function() {
		this.products = [
			{name: '1', price: 2.0},
			{name: '2', price: 2.5},
			{name: '3', price: 5.8}
		];
		
		this.number = this.products.length;
		
		this.toggleProducts = function() {
			$('#products-list').slideToggle();
		};

		this.addProduct = function(????????) {
			this.products.push(???????);
		};

	});

	app.controller("CustomerController", function() {
		this.customers = [
			{name: 'Bob', city: 'Kiev', age: 40, ava: 'bob.jpg'},
			{name: 'Sue', city: 'Kiev', age: 30, ava: 'sue.jpg'},
			{name: 'Dan', city: 'Kiev', age: 25, ava: 'dan.jpg'}
		];
		
		this.number = customers.length;
		
		this.toggleCustomers = function() {
			$('#customers-list').slideToggle();
		};			
	});

	
})();


Подскажите, пожалуйста, как реализовать:
- добавление элемента в список?..
- удаление из списка?..

с добавлением начал работать, но уперся.. не могу понять, что мне передавать в addProduct и в push ... :(
да и в хтмл мне не нравится как список добавления я сделал... но пробовал другие варианты, так ничего путного не выходило - всегда попадала позиция под ng-repeat уже внесенного продукта...

Спасибо!


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