добрый день, всем!
есть такая тема:
<!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 уже внесенного продукта...
Спасибо!
