How to implement the idea of a slider showing images and video.
How to get repetition via ng-repeat of different data types?
I have a list of files:
var scr = [
{src: 'img1.png', title: 'Pic 1'},
{src: 'img2.jpg', title: 'Pic 2'},
{src: 'vid1.mp4', title: 'Vid 1'},
{src: 'vid2.mp4', title: 'Vid 2'}
];
Images can be inserted through ng-repeate:
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img src="./img/slides/{{image.src}}"/>
</div>
How to insert videos in this list?
Maybe there are other ways to get a slider?
I would be grateful for any help.
If you can modify the data array,
var scr = [
{src: 'img1.png', title: 'Pic 1', type: 'imge'},
{src: 'img2.jpg', title: 'Pic 2', type: 'imge'},
{src: 'vid1.mp4', title: 'Vid 1', type: 'video'},
{src: 'vid2.mp4', title: 'Vid 2', type: 'video'}
];
Then you can use ng-if to determine the element to use
<div class="slide" ng-repeat="media in scr">
<img ng-if="media.type == 'image'" ng-src="./img/slides/{{media.src}}" />
<video ng-if="media.type == 'video'" ng-src="{{media.src}}"></video>
</div>
have you seen http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation this? for different data-types use
ng-switch on="image"
and then compare it with src or title
ng-switch-when="image.src == 'video'"
#.... render video object here
ng-switch-default
do some default behaviour of showing your image
sorry missed the type thing in your src, or you can split your string and use the same as well :) your choice
Related
I am developing some code using Angular. In my ts file, I have created an array as below
ArrayB= [
{ id: 1, src: 'url' },
{ id: 2, src: 'url' },
{ id: 3, src: 'url' },
{ id: 4, src: 'url' },
{ id: 5, src: 'url' }];
This is ArrayA
ArrayA = Array(5).fill(' ').map((index,_)=>({id:index,src:url}));
I have created grid in HTML file. I want put images (in URL) on each grid tiles.
<mat-grid-list cols="10">
<mat-grid-tile *ngFor="let cell of ArrayA; let i = index">
<div
class="cell"
cdkDropList
[cdkDropListData]="cell"
(cdkDropListDropped)="drop($event)"
[style.background]="i == indexOver ? 'yellowgreen' : 'yellowgreen'"
(mouseover)="this.indexOver = i"
(mouseout)="indexOver = -1" >
<div cdkDrag>
<img
*ngIf="cell.src"
[src]="cell.src"
width="100%"/>
<span *ngIf="!cell.src"></span>
<div *cdkDragPlaceholder></div>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
So how can I put multiple data objects to ArrayA like ArrayB and assign images to each grid tile.
I use Angular advanced searchbox to create a search box.But when adding suggestedValues into scope availableSearchParams it doesn't display suggestions and my modal get undefined.Please let me know what went wrong.
Scripts load order
angular-advanced-searchbox.min.css
angular-advanced-searchbox-tpls.min.js
angular-advanced-searchbox.min.js
app.js // contain app module
HTML
<div class="form-group">
<label class="col-md-2 col-lg-2 control-label"></label>
<div class="col-md-10 col-lg-10">
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>
<pre><code>{{searchParams}}</code></pre>
</div></div>
App.Js
$scope.availableSearchParams = [
{ key: "team", name: "Team", placeholder: "filter by team", restrictToSuggestedValues: true, suggestedValues: ['Berlin', 'London', 'Paris'] },{ key: "testtype", name: "TestType", placeholder: "filter by test type",restrictToSuggestedValues: true, suggestedValues: ['Smoke', 'Regression', 'Benchmark'] }, { key: "text", name: "Text", placeholder: "filter by text" } ];
$scope.$on('advanced-searchbox:modelUpdated', function (event, model) {
console.log(model);
});
You must include ui.bootstrap in your module, before angular-advanced-searchbox:
angular.module('SensacionalApp', [
'ngMaterial',
'ui.bootstrap',
'angular-advanced-searchbox'
]);
I have an array multidimensional with multiples results:
books: any[] = [
{
name: "The Name book",
chapter: [{
name: 'Alpha',
pages: '180'
}, {
name: 'Beta',
pages: '100'
}]
},
{
name: "Jungle Book",
chapter: [{
name: 'Whole book',
pages: '300'
}]
}
]
I would like to understand how to create a *ngIf when a book has just one chapter like "Jungle book" or multiples as "The Name Book."
Thanks for your help
I am not sure I have fully understood the selection creteria.
Anyway, assuming the template where you want to add the *ngIf check is defined in the same Component where you define the books property, I would try something like this
In the template
<div *ngFor="let book of books">
<div *ngIf="isBookToShow(book)">
<!-- here goes the rest of your html -->
</div>
</div>
with the corresponding method isBookToShow(book) in the class
isBookToShow(book) {
return book.chapter.length > 0
}
I have tried to research this issue and have had no luck. My ng-repeat doesn't display dynamic content from the controller on the first try. I was told to use a .digest or apply to get angular to hit my page again but I am not quite clear how to implement. From the examples I saw online this should work
var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);
shopItems.controller('shopItemController', function ($scope) {
$scope.shopItems = [{
//id: 01,
name: 'One',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
},{
//id: 02,
name: 'Two',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
}];
$scope.$apply();
});
trophyEarns.controller('trophyEarnsController', function ($scope) {
$scope.trophyEarns = [{
//id: 01,
name: 'One',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
},{
//id: 02,
name: 'Two',
//img: '',
price: '$3.99',
altprice: '1 mile',
desc: 'This is a fake description.',
prog: '50%'
}];
$scope.$apply();
});
Here is a snippet of the html and controller
<div ng-app="app">
<div ng-controller="shopItemController">
<div class="itm" ng-repeat="shopItem in shopItems">
<div class="imag"></div>
<h2>{{ shopItem.name }}</h2>
<div class="hff">Earn it: {{ shopItem.altprice }}</div>
<div class="hf">Buy it: {{ shopItem.price }}</div>
<div class="desc"><div>{{ shopItem.desc }}</div></div>
<div class="prog"><div>{{ shopItem.progress }}</div></div>
</div>
</div>
</div>
But this does nothing and no errors pop up. I am still forced to reload every time I leave and go back to the pages with the controllers to see the dynamic content. Am I using this correctly? Is digest better?
Is there any way I can know what is the current active slide?
var slides = slides = [];
slides.push({text: 'Slide 1', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false
}});
slides.push({text: 'Slide 3', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false
}});
$scope.slides=slides;
<carousel>
<slide ng-repeat="slide in slides">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
I am not sure were i need to add watch though?
Please treat this as a seperate question:
You can see from my code there are 2 charts information in the slide.
But when its presented / slided second one alone gets squeezed in width.
In other words is there any way i can auto scale the highchart at the time of rendering?
Is there any work around to fix it.
Update:
Actually, angular-ui does allow you to set an active property on the slide directive which will be set to true when the slide becomes active.
In this example: slide.active will be set to true when the slide is active.
<carousel>
<slide ng-repeat="slide in slides" active="slide.active">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
Controller
var slides = slides = [];
slides.push({
active: false
, text: 'Slide 1'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false }
}
);
slides.push({
active: false
, text: 'Slide 3'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false }
}
);
$scope.slides=slides;
// May return `undefined` if no slide is active
// (e.g. when the carousel hasn't initialised)
$scope.getActiveSlide = function () {
return slides.filter(function (s) { return s.active; })[0];
};
There was an issue to add this information to the slide event, but they decided not to do it.
There are some workarounds to it though:
This comment on the issue
Twitter Bootstrap Carousel - access current index
I've been able to get the current index of the carousel slide with the following jQuery code (the carousel html must have the id="myCarousel"):
$('#myCarousel .active').index();
I used it for adding the ng-swipe-left/right to the carousel and it works (if you are interesed, full answer with the controller js code here: angular ui.bootstrap.carousel call next()/prev() from $scope)
It works for bootstrap 3.0.2