>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.
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham
