JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.0.1/angular-resource-1.0.1.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-mocks-1.0.1.js"></script>
<table border="1">
<tr>
<th>Title</th>
<th>Director</th>
<th>Price</th>
</tr>
<tr ng-repeat="video in videos">
<td>
<a ng-href="?videoId={{video.VideoID}}">
{{video.Title}}
</a>
</td>
<td>{{video.Director}}</td>
<td>{{video.Price}}</td>
</tr>
</table>
JavaScript
'use strict';
var app = angular.module('appModule', ['ngResource']);
// Set up $httpBackend with mock data
app.config(function ($provide) {
$provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});
app.run(function ($httpBackend) {
$httpBackend.when('GET', '/Video/Query?videoIds=1,2').respond([{ "VideoId": 1, "Price": 108 }, { "VideoId": 2, "Price": 155}]);
});
function VideoListCtrl($scope, $resource, $timeout) {
// Bootstrapped data
$scope.videos = [
{ "VideoId": 1, "Title": "American Beauty", "Director": "Sam Mendes", "Quantity": 0, "Price": 10.0000 },
{ "VideoId": 2, "Title": "Fight Club", "Director": "David Fincher", "Quantity": 0, "Price": 13.0000 },
{ "VideoId": 3, "Title": "Ghostbusters", "Director": "Ivan Reitman", "Quantity": 0, "Price": 8.0000 },
{ "VideoId": 4, "Title": "Pulp Fiction", "Director": "Quentin Tarantino", "Quantity": 0, "Price": 4.5000 }
];
var Prices = $resource('/Video/Query');
var updatedPrices = Prices.query({ videoIds: [1, 2] }, function () {
$timeout(function() {
angular.forEach(updatedPrices, function (value) {
var video = getVideo($scope.videos, value.VideoId);
video.Price = value.Price;
});
}, 1000);
});
}
// Helper to find a video record in an array of videos
function getVideo(videos, videoId) {
var result = null;
angular.forEach(videos, function (value, key) {
if (value.VideoId == videoId) {
//angular.forEach won't let me return??
result = value;
}
});
return result;
}