>>OK - simple example. WebApiController:
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....
>
>Thank you very much for the sample code. I will review and see if it applies to my project.
As it stands I'm sure it won't. But should give an idea of the approach.....
