using System.Collections.Generic; >>using System.Web.Http; >> >>namespace MvcApplication1.Controllers >>{ >> public class EquipmentController : ApiController >> { >> [HttpPost] >> public List<Item> Items() >> { >> //In reality build this from the datatable >> return new List<Item> >> { >> new Item {Company = "XYZ Inc", Id = "12345", Model = "Teleporter Mk2"}, >> new Item {Company = "ABC Inc", Id = "23456", Model = "Stun Gun"}, >> new Item {Company = "Arr Inc", Id = "23456", Model = "Warp Drive"} >> }; >> } >> } >> >> public class Item >> { >> public string Id { get; set; } >> public string Company { get; set; } >> public string Model { get; set; } >> } >>}html page:
<!DOCTYPE html> >><html xmlns="http://www.w3.org/1999/xhtml" ng-app> >><head> >> <title></title> >> <script src="scripts/angular.js"></script> >> <script src="Scripts/jquery-1.8.2.js"></script> >></head> >> <body> >> <form data-ng-controller="EquipCtrl"> >> <input id="loadBtn" type="button" value="Load Data" data-ng-click="LoadData()" /> >> <table> >> <tr> >> <th>Id</th> >> <th>Company</th> >> <th>Model</th> >> </tr> >> <tr ng-repeat="item in EquipmentList" data-ng-click="showrow(item)"> >> <td>{{item.Id}}</td> >> <td>{{item.Company}}</td> >> <td>{{item.Model}}</td> >> </tr> >> </table> >> <p> >> <input id="Text1" type="text" data-ng-model="currentItem.Id" /> >> <input id="Text2" type="text" data-ng-model="currentItem.Company" /> >> <input id="Text3" type="text" data-ng-model="currentItem.Model" /> >> </p> >> </form> >> </body> >> >><script type="text/javascript"> >> function EquipCtrl($scope, $http) { >> >> $scope.currentItem = null; //currently selected item >> $scope.EquipmentList = []; //list of items >> >> //async call to the webapi: >> $scope.LoadData = function () { >> $http.post('/api/Equipment/items') >> .success(function (data, status, headers, config) { >> $scope.EquipmentList = data; >> }); >> }; >> >> //Change current item when row is clicked >> $scope.showrow = function (item) { >> $scope.currentItem = item; >> }; >> } >></script> >></html>Not pretty since I've not applied any styling. If you want to try it just add the controller to a new MVC/WebApi project Controllers folder. Make sure you have angular.js in the scripts section. Note how the table contents change when editing one of the textboxes....