JSFiddle - React, Tailwind, and code Playground
HTML
<body ng-app="ProductApp">
<h1>Product List</h1>
<div ng-controller="ProductController">
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>CategoryId</th>
</tr>
<tr ng-repeat="product in products track by $index" ng-class="product.level==0 ? 'red' : 'black'" ng-include="getTemplate(product)">
</tr>
</table>
</div>
<br /><br /><br />
<div ng-controller="FormCtrl">
<input type="text" ng-model="name">
<input type="text" ng-model="description">
<input type="text" ng-model="price">
<input type="text" ng-model="categoryid">
<br>
<button ng-click="insert()">Insert</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
var app = angular.module("ProductApp", []);
app.controller("ProductController", function ($scope, $http) {
$http.get('http://localhost:22258/api/product').
success(function (data, status, headers, config) {
$scope.products = data;
var selected = {};
$scope.products.push(selected);
}).
error(function (data, status, headers, config) {
alert("error");
});
$scope.delete = function Delete(index) {
console.log(index);
$http.delete(
'http://localhost:22258/api/product/' + $scope.products[index].id,
{
headers: {
'Content-Type': 'application/json'
}
}
).success(function (data) {
$scope.products.splice(index, 1);
}
).error(function (data) {
console.log('delete error');
});
}
$scope.edit = function...