Available in the Full Version
Data Grid - AngularJS
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Add Product
| Product ID | Product Name | Units On Order | Unit Price | |
|---|---|---|---|---|
| {{product.ProductID}} | {{product.QuantityPerUnit}} |
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how AngularJS directives are used with the igGrid.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="/js/angular.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/extensions/igniteui-angularjs.js"></script>
<script src="/data-files/northwind-products.js"></script>
<script type="text/javascript">
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
sampleApp.controller('gridController', function ($scope) {
$scope.data = angular.copy(northwindProducts.results);
$scope.deleteProduct = function (ix) {
$scope.data.splice(ix, 1);
};
$scope.addProduct = function () {
$scope.newProduct.ProductID = $scope.data.length + 1;
var tmp = angular.copy($scope.newProduct);
$scope.data.push(tmp);
};
$scope.newProduct = {
ProductID: 21,
ProductName: null,
QuantityPerUnit: null,
UnitsInStock: null
};
});
</script>
<script id="colTmpl" type="text/template" ng-non-bindable>
{{if ${UnitsInStock} == null }}
N/A
{{elseif ${UnitsInStock} >= (Math.random()+0.5)*${UnitsInStock} }}
$ ${UnitsInStock}
<img width='10' height='15' src='https://www.igniteui.com/images/samples/templating-engine/coltemplatewithconditionalcell/arrowup.gif' />
{{else}}
$ ${UnitsInStock}
<img width='10' height='15' src='https://www.igniteui.com/images/samples/templating-engine/coltemplatewithconditionalcell/arrowdown.gif' />
{{/if}}
</script>
<style>
.row {
margin-right: 0;
margin-left: 0;
}
</style>
</head>
<body>
<div ng-app="sampleApp" ng-controller="gridController">
<div class="row">
<div class="col-md-8">
<ig-grid id="grid1"
data-source="data"
data-source-type="json"
width="100%"
height="400px"
primary-key="ProductID"
auto-commit="true"
auto-generate-columns="false">
<columns>
<column key="ProductID" header-text="ID" width="50px" data-type="number"></column>
<column key="ProductName" header-text="Product Name" width="250px" data-type="string"></column>
<column key="QuantityPerUnit" header-text="Units On Order" width="200px" data-type="string"></column>
<column key="UnitsInStock" header-text="Unit Price" width="100px" data-type="number" template="{{getHtml('#colTmpl')}}"></column>
</columns>
<features>
<feature name="Updating">
<column-settings>
<column-setting column-key="ProductID" read-only="true">
</column-setting>
</column-settings>
</feature>
<feature name="Paging" page-size="10">
</feature>
<feature name="Sorting">
</feature>
</features>
</ig-grid>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4>Add Product</h4>
</div>
<div class="card-block">
<form name="myForm">
<input type="text" ng-model="newProduct.ProductName" class="form-control" placeholder="Product Name">
<input type="text" ng-model="newProduct.QuantityPerUnit" class="form-control" placeholder="Units On Order">
<input type="number" ng-model="newProduct.UnitsInStock" name="unitsInStock" class="form-control" placeholder="Unit Price">
<input type="button" value="Add row" ng-click="addProduct()" ng-disabled="myForm.unitsInStock.$error.number" class="btn btn-secondary" />
</form>
</div>
</div>
</div>
</div>
<hr />
<table id="simpletable" class="table table-striped table-hover">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Units On Order</th>
<th>Unit Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in data">
<td>{{product.ProductID}}</td>
<td><input type="text" ng-model="product.ProductName" class="form-control" /></td>
<td>{{product.QuantityPerUnit}}</td>
<td><input type="number" ng-model="product.UnitsInStock" class="form-control" /></td>
<td><input type="button" value="Delete row" ng-click="deleteProduct($index)" class="btn btn-secondary" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
var northwindProducts = {
"results": [{
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)",
"type": "NorthwindModel.Product"
},
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": "18.0000",
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)",
"type": "NorthwindModel.Product"
},
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": "19.0000",
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(2)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)",
"type": "NorthwindModel.Product"
},
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": "10.0000",
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(3)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)",
"type": "NorthwindModel.Product"
},
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": "22.0000",
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(4)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)",
"type": "NorthwindModel.Product"
},
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": "21.3500",
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)",
"type": "NorthwindModel.Product"
},
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": "25.0000",
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(6)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)",
"type": "NorthwindModel.Product"
},
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": "30.0000",
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(7)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)",
"type": "NorthwindModel.Product"
},
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": "40.0000",
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(8)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)",
"type": "NorthwindModel.Product"
},
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": "97.0000",
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(9)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)",
"type": "NorthwindModel.Product"
},
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": "31.0000",
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(10)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)",
"type": "NorthwindModel.Product"
},
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": "21.0000",
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(11)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)",
"type": "NorthwindModel.Product"
},
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": "38.0000",
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(12)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)",
"type": "NorthwindModel.Product"
},
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": "6.0000",
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(13)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)",
"type": "NorthwindModel.Product"
},
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": "23.2500",
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(14)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)",
"type": "NorthwindModel.Product"
},
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": "15.5000",
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(15)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)",
"type": "NorthwindModel.Product"
},
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": "17.4500",
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(16)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)",
"type": "NorthwindModel.Product"
},
"ProductID": 17,
"ProductName": "Alice Mutton",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 - 1 kg tins",
"UnitPrice": "39.0000",
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(17)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)",
"type": "NorthwindModel.Product"
},
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": "62.5000",
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(18)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)",
"type": "NorthwindModel.Product"
},
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": "9.2000",
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(19)/Supplier"
}
}
}, {
"__metadata": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)",
"type": "NorthwindModel.Product"
},
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": "81.0000",
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)/Category"
}
},
"Order_Details": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)/Order_Details"
}
},
"Supplier": {
"__deferred": {
"uri": "http://services.odata.org/Northwind/Northwind.svc/Products(20)/Supplier"
}
}
}]
};