how i can include and remove a list of products from a table with AngularJS? i select an product in a select list, and set the amount, in amount, then i click add, to add in a table.
http://jsfiddle.net/hqWW7/
HTML:
<label>Select a product</label>
<select>
<option>select...</option>
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
<option>value 5</option>
</select>
<br>
<label>Amount</label>
<input type="text" name="amount">
<button type="button">ADD</button>
<br>
<table>
<thead>
<tr>
<td>Product</td>
<td>Amount</td>
<td>Remove</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td><a href="">x</a></td>
</tr>
</tbody>
</table>
CSS:
table {
width: 50%;
}
table thead {
background-color: green;
color: #fff;
font-family: arial;
}
table tbody {
background-color: #ddd;
}
Best How To :
<script>
angular.module("myApp", ['ngResource'])
.controller("myCtrl", function ($scope) {
$scope.products = [
{name: "apple", amount: "111"},
{ name: "orange", amount: "222"}
];
$scope.addProduct = function () {
$scope.products.push({name: $scope.myModel1, amount: $scope.myModel2, })
}
$scope.removeProduct = function (productToRemove) {
var index = $scope.products.indexOf(productToRemove);
$scope.products.splice(index, 1);
}
})
</script>
<!doctype>
<html>
<head>
<title>Test</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<label>Select a product</label>
<select ng-model="myModel1">
<option>select...</option>
<option>value 1</option>
<option>value 2</option>
<option>value 3</option>
<option>value 4</option>
<option>value 5</option>
</select>
<br>
<label>Amount</label>
<input type="text" name="amount" ng-model="myModel2">
<button type="button" ng-click="addProduct()">ADD</button>
<br>
<table>
<thead>
<tr>
<td>Product</td>
<td>Amount</td>
<td>Remove</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{product.name}}</td>
<td>{{product.amount}}</td>
<td ng-click="removeProduct()"><a href="#">X</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
