I load quite a few videos on the page, from youtube. I want to replace the div with placeholder, and only request the video when user clicks on the placeholder image.
I got this part working where it loads the video on ng-click, but it loads all of them, obviously. How do I load just the one that was clicked?
Here's my html inside ng-view and ng-repeat:
<figure class=" img-responsive">
<iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}"
frameborder="0" allowfullscreen="false" autoplay="0" ng-if="doplay">
</iframe>
<img ng-src="images/logos/videoplaceholder.jpeg" height="180"
class="img-responsive" ng-if="!doplay" ng-click="setPlay()" />
</figure>
<script>
$scope.setPlay = function (){
$scope.doplay = true;
}
</script>
Like I said, the above works, but loads all the videos at once. I need to load just the one that was clicked. Thanks!!
I don't see your ngRepeat, but the simplest way is something like this:
<figure class="img-responsive" ng-repeat="item in items">
<iframe width="320" height="180" ng-src="{{item.VideoUrl | trusted }}" frameborder="0" allowfullscreen="false" autoplay="0" ng-if="item.doplay"></iframe>
<img ng-src="images/logos/videoplaceholder.jpeg" height="180" class="img-responsive" ng-if="!item.doplay" ng-click="item.doplay = true" />
</figure>
and skip the controller method. That just sets a property on each item in your collection.
Your doplay property only contains one value, so the ng-if condition is the same for every video. You might be able to get away without adding the doplay property to item in advance, since if it's not present it will be falsey.
So your code would change to:
<img ng-src="images/logos/videoplaceholder.jpeg" height="180" class="img-responsive" ng-if="! item.doplay" ng-click="setPlay(item)" />
and
$scope.setPlay = function (item)
{
item.doplay = true;
}
Related
I have an ng-repeat div. In that, I want to call a function using ng-init directive; in that function, I want to append data to the div dynamically, by a created dynamic id. However, I didn't get dynamically created ids in get_All_ImagesData function.
I Want to be able to call this function inside the ng-Repeat loop.
Code is below
<div class="active-task-body" data-ng-repeat="items in UserAssignTaskAllData">
<div class="col-md-12" id="data-{{items.TaskDetailId}}">
<div class="task-data-images" ng- init="get_All_ImagesData(items.TaskDetailAttachment,items.TaskDetailId)">
</div></div></div>
Function in controller:
$scope.get_All_ImagesData = function (AttachedDataArray,id) {
if (AttachedDataArray != "")
{
var dataAppend = "<a href=''> <img src="+current_page_url +"Content/images/filetype/image.jpg"
+' height="30" width="30" /></a>';
angular.element(document.getElementById('data-' + id)).append(dataAppend);
}
}
The "Angular way" is to let the model drive the DOM. You should not manipulate the DOM manually from controllers like you do in your function. Write all the HTML in your template and then change the model to change the view.
<div class="active-task-body" data-ng-repeat="items in UserAssignTaskAllData">
<div class="col-md-12">
<a href='' ng-if="items.TaskDetailAttachment">
<img
ng-src="{{current_page_url}}Content/images/filetype/image.jpg"
height="30"
width="30" />
</a>
</div>
</div>
Note that current_page_url should be a property of $scope for this to work.
"allitems" contains all items for a category that is selected in a combobox. That part of the code working properly.
I have images saved in a database as binary data for each item. When an item is displayed then the image of the item shall be rendered. For doing this I have to save item's ID in ASP .Net controller before rendering, because the "RenderImage" needs the Item's ID. This is done by calling "saveItemId" in AngularJS controller.
But the rendering of the images are very unpredictable. "saveItemId" is called repeatedly but not RenderImage.
There is no problem calling methods/saving ID in AngularJS controller or in ASP .Net MVC controller.
<div dir-paginate="r in allitems | filter:q | itemsPerPage: pageSize" current-page="currentPage" ng-init ='saveItemId(r.ID)' class="ag-fresh">
<div style="float:left">
<div class="col-xs-3">
<div style="width:200px;">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="#Url.Action("RenderImage")" height="84" width="84"/>
<br/>
<h>{{r.Price}}</h>
<p>{{r.Name}}</p>
<button class="btn btn-default add-to-cart" ng-click="AddToCart(r.ID)">Add to cart</button>
{{successTextAlert}}
</div>
</div>
</div>
</div>
</div>
</div>
its seems that RenderImage is a js variable in the controller scope. if its so, its need to be call with brackets, like {{RenderImage}}
Try using 'ng-src' instead 'src' attribute, for the img element as described at
https://docs.angularjs.org/api/ng/directive/ngSrc#!
This works properly:
<img ng-src="data:image/jpeg;base64,{{arrayBufferToBase64(r.InternalImage)}}" height="84" width="84"/>
I Added arrayBufferToBase64 to the angular controller.
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I am using metro ui and am trying to use ng-repeat within it to build html within a popup.
My template looks like this. Any thoughts would help. I have verified the data is there, but ng-repeat just doesn't work within double quotes. I've tried using single quotes, but that doesn't work.
Here's my template.
<div class="container">
<div class="title-group six">
<a ng-repeat="product in products"
data-hint="{{product.name}}|<div><ul><li ng-repeat='color in product.colors'>{{color.name}}</li> </ul></div>" href="#/product/{{product.id}}" class="tile bg-violet" data-click="transform" >
<div class="tile-content icon">
<img src="{{product.pic}}">
</div>
<div class="brand">
<div class="label">{{product.name}} </div>
</div>
</a>
</div>
As a start, your HTML is malformed, you need a closing DIV tag on the end.
Also, in your ng-repeat, your variable name should be different to the array. I'd suggest something like:
ng-repeat="p in products" or ng-repeat="product in products"
Hopefully this helps.
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.