I have my vimeo api that i fetch using angularjs or angular2.
Everything works great except the iframe.
I use {{data.embed.html}} to display the iframe but displays the iframe as string, not the video
This is my video.component.html:
<div *ngFor="let item of lenght; let i = index">
<div *ngFor="let video of videos">
<ul>
<li>{{video.data[i].embed.html}}</li>
</ul>
</div>
</div>
and this is what I get instead of getting the real video. It works great if i do it in a regular ajax get request in javascript, but I cannot make it work in any angular version.
Thank you for your help.
You are looking for [innerHtml] directive.
<li [innerHtml]="video.data[i].embed.html"></li>
More about it in Angular2 guide.
Related
I am using Contentful in my AngularJS app... I have a content type team which holds a list of team bios. http://uat.traverusglobal.com (bottom)
I have successfully gotten data from contentful using angular-contentful... Now I need to to sort the response by name or other contentful field. So that the admin has control over the order.
How can I sort the contentful response on the frontend of my angular app? Below is my attempt.
https://jsfiddle.net/k3jmq2gm/1/
<div class="columns teams-list" contentful-entries="'content_type=staff'" ng-controller="teamContentful">
<div ng-repeat="item in $contentfulEntries.items | orderBy:'item.fields.name'" class="column" data-flag="{{item.fields.flag}}" data-visible="{{item.fields.visible}}" ng-class='{active:$first}' data-tab="1" data-title="{{item.fields.title}}" data-name="{{item.fields.name}}">
<!-- <h1>{{item[0].title}}</h1> -->
<img src="{{ item.fields.image.fields.file.url }}" title="{{item.img}}">
<p class="hide bio">{{item.fields.bio}}</p>
</div>
</div>
as Und3rTow pointed out. orderBy should be orderBy:'fields.name'
I have created an menu using JSON data in angular JS. Menu is created and works the way expected. Menu has 6 tabs i.e. HOME,ABOUTUS,CONTACTUS,SERVICES,LOGIN,REGISTER on load first home page will be displayed, when about us is clicked only container data will be changed to display about us and its working fine (ngroute routing concept used) similarly other pages contactus, login, register will be routed to different pages and works fine.
Now when SERVICES tab is is clicked a dropdown should be displayed with the submenuItems "CAR TRADE","BIKE TRADE","AUTO LOAN", "INTEREST RATE".
I am facing issue in creating a submenu dropdown. I am from legacy background and learning web development and working on angular js project. Your help is appreciated.
I worked on submenu it was disaster so i have taken the useful stuff off and only working code is below:
<div class="row secondarynavbar">
<div class="col-lg-12 navigation-bar" ng-controller="menuCntrl">
<ul ng-repeat="menu in menulist">
<li>
{{menu.menuItem}}
</li>
</ul>
</div>
</div>
Here is the HTML code which creates menu from JSON data.(Works fine)
Simple angular code to get json data...(works fine)
app.controller('menuCntrl',function($scope,$http){
$http.get('data/menujson.json').success(function(data){
$scope.menulist = data;
}) });
Please help in taking it forward.
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.
How do i integrate angularJS in codeignitor framework? How to load the templateUrl or template?
You'd integrate it the same way you would normally.
<html ng-app="myApp">
And then add your controllers to your views. For example, let's say I have a view for my blog posts:
<div ng-controller="myController">
<div ng-repeat="blog in blogs">
<h1>{{ blog.title }}</h1>
<p>{{ blog.body }}</p>
</div>
</div>
If you have data you're storing and retrieving with codeigniter, you can make post and get requests in angular to a specific url to get/post your data. Just remember to echo out the json encoded response in the codeigniter function.