Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS Snippet
<div ng-app="videoApp" ng-controller="VideoController">
<table>
<thead>
<th>Title</th>
<th>Length</th>
<th></th>
</thead>
<tbody>
<tr data-id="{{video.Id}}" ng-repeat="video in videos">
<td>{{video.Title}}</td>
<td>{{video.Length}}</td>
<td>
<button ng-click="editVideo(video)">Edit</button>
<button ng-click="deleteVideo(video)">Delete</button>
</td>
</tr>
</tbody>
</table>
<button ng-click="showEdit()">Create Video</button>
<div ng-show="isEditVisible">
<hr />
<form>
<input type="hidden" ng-model="editableVideo.Id" />
<label>Title:</label>
<input type="text" ng-model="editableVideo.Title" required />
<label>Length</label>
<input type="number" ng-model="editableVideo.Length" min="1" max="360" />
<input type="submit" value="Save" ng-click="saveVideo(editableVideo)" />
</form>
</div>
</div>
@section scripts{
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/underscore.js"></script>
<script>
angular.module("videoApp", ["videoService"]);
angular.module("videoService", ["ngResource"]).
factory("Video", function ($resource) {
return $resource(
"/api/videos/:Id",
{Id: "@@Id" },
{ "update": {method:"PUT"} }
);
});
var VideoController = function ($scope Video) {
var createVideo = function (newVideo) {
newVideo.$save();
$scope.videos.push(newVideo);
};
var updateVideo = function(video) {
video.$update();
};
$scope.showEdit = function () {
$scope.isEditVisible = true;
$scope.editableVideo = new Video();
};
$scope.saveVideo = function (video) {
$scope.isEditVisible = false;
if (video.Id) {
updateVideo(video);
}
else {
createVideo(video);
}
};
$scope.editVideo = function (video) {
$scope.isEditVisible = true;
$scope.editableVideo = video;
};
$scope.deleteVideo = function (video) {
video.$delete();
$scope.videos = _.without($scope.videos, video);
};
$scope.isEditVisible = false;
$scope.videos = Video.query();
};
</script>
@dlidstrom

This comment has been minimized.

Copy link

@dlidstrom dlidstrom commented Mar 5, 2013

Very nice example, thanks. Isn't line 57 missing a comma though?

@turnkey-commerce

This comment has been minimized.

Copy link

@turnkey-commerce turnkey-commerce commented Apr 2, 2013

Good catch, it is missing a comma.

@herrherrmann

This comment has been minimized.

Copy link

@herrherrmann herrherrmann commented Jun 12, 2015

… and line 57 is missing a comma, I think. It should be

var VideoController = function ($scope, Video) {         
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment