As a beginner in Angular.js, I feel like I might have missed something small but significant here.
To enhance my understanding of Angular, I am constructing a simple panel to route video sources to various destinations.
I currently have a list of predefined sources and destinations (each destination having two slots). These will eventually be loaded from an API, but for now, they are hardcoded in the JavaScript file.
When I choose a source, the "selectedSource" variable is updated with the clicked source. Then, when I click on a destination slot, that slot's content is set to the "selectedSource" object.
Although the console log indicates that the thumb URL of the slot has been updated, the HTML does not display the new image. I have tried using "apply," but I don't think that's the correct approach.
You can view my simplified code snippet here: http://jsfiddle.net/f4Tgf/
function app($scope, $filter) {
$scope.selectedSource = null;
$scope.sources = {
source1 : {id:'source1', thumbUrl:'http://lorempixel.com/100/100/sports/1/'},
source2 : {id:'source2', thumbUrl:'http://lorempixel.com/100/100/sports/2/'},
source3 : {id:'source3', thumbUrl:'http://lorempixel.com/100/100/sports/3/'}
}
$scope.destinations = {
dest1 : {id:'dest1', slots: {slot1 : $scope.sources.source2,slot2 : $scope.sources.source3} }
}
$scope.selectSource = function(source){
if($scope.selectedSource == source){
// toggle the selected source off if it is already selected
$scope.selectedSource = null;
}else{
$scope.selectedSource = source;
}
}
$scope.selectSlot = function(slot){
slot = $scope.selectedSource;
console.log(slot.thumbUrl);
//reset selected source
$scope.selectedSource = null;
}
}
HTML:
<body >
<div ng-app ng-controller="app" class="container-fluid">
<div class="row">
<!-- SOURCES -->
<div id="source-container" class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Sources</h3>
</div>
<div class="panel-body row">
<!-- Show all sources -->
<div ng-repeat="source in sources" ng-class="{selected: source==selectedSource}" ng-click="selectSource(source)" class="col-md-6 col-sm-12">
<div class="thumbnail">
<img class="img-responsive" src="{{source.thumbUrl}}" />
</div>
</div>
</div>
</div>
</div>
<!-- SOURCES -->
<!-- DESTINATIONS -->
<div id="sink-container" class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Destination</h3>
</div>
<div class="panel-body row">
<!-- Show all destinations -->
<div ng-repeat="destination in destinations" ng-class="{available: selectedSource!=null}">
<div class="thumbnail">
<div ng-repeat="slot in destination.slots" ng-click="selectSlot(slot)">
<img class="img-responsive" src="{{slot.thumbUrl}}" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END DESTINATIONS -->
</div>
</div>
</body>
(Before advising me to use services or other advanced concepts, please remember that this project serves as my initial learning experience.)