My Previous Articles
I have used the following method in this article:
SQL Script is available in part 1 (link is given above)
View page Index.cshtml
  • Here I have used filter for description.
  • I placed filter:search in my ng-repeat and used in description text box ng-model ="search.ProductDescription".
  1. <table class='table table-bordered'>
  2. <tr>
  3. <th>Name</th>
  4. <th>Description</th>
  5. <th colspan="2">Action</th>
  6. </tr>
  7. <tr>
  8. <th>
  9. <label for="description">Filter By Description-> </label>
  10. </th>
  11. <th>
  12. <input type="text" ng-model="search.ProductDescription" placeholder="Enter Description" class="form-control"></th>
  13. <th colspan="2"></th>
  14. </tr>
  15. <tr ng-repeat="Product in Products | filter:search ">
  16. <td>{{ Product.ProductName}}</td>
  17. <td>{{ Product.ProductDescription}}</td>
  18. <td><span><a href="javascript:void(0);" ng-click="edit(Product);">
  19. <img width="16" height="16" alt="Close" src="Image/Edit.jpg" /></a></span></td>
  20. <td><span><a href="javascript:void(0);" ng-click="delete(Product.Id);">
  21. <img width="16" height="16" alt="Close" src="Image/close.png" /></a></span></td>
  22. </tr>
  23. </table>
Controller page (ProductInfoController.cs)
  1. public ActionResult Index()
  2. {
  3. return View();
  4. }
API Controller page(ProductInfoAPIController.cs)
  • Here I have written method for getting data from my model.
  1. public class ProductInfoAPIController : ApiController
  2. {
  4. private readonly TestProductEntities db = new TestProductEntities();
  6. // GET: api/ProductInfoAPI
  7. public string GetProductInfos()
  8. {
  9. var serializer = new JavaScriptSerializer();
  10. return (serializer.Serialize(db.ProductInfoes.ToList()));
  11. }
  13. }
Service.js
  • Below I have declared get service for fetching data.
  • Also my Controller.js and App.js is same as my previous article.
  • I have attached the source code.
  1. app.factory('AngularService', ['$http', function ($http) {
  2. return {
  3. get: function () {
  4. return $http({
  5. method: 'GET',
  6. headers: {
  7. 'Content-Type': 'application/json; charset=utf-8'
  8. },
  9. url: '/api/ProductInfoAPI/GetProductInfos',
  10. data: {}
  11. });
  12. },
  13. };
  14. ]);
Output

You can also test the output here.