I have a JSON object that has an array of ingredients within, I want to repeat each object into an <li> so I can list them out. The area I want to repeat is the "ingredientLines"
My JSON is
My current code is, I currently just get all 10 objects listed out in a single <li>
<ion-content>
<ion-list>
<ion-item>
<div class="thumb">
<ion-img src="{{api?.images["0"].hostedLargeUrl}}">
<h1>{{api?.name}}</h1>
</div>
<div class="action-bar">
<div class="like">
</div>
<div class="time">
<span>{{api?.totalTime}}</span>
</div>
<div class="share">
</div>
</div>
<div class="ingredients" ng-repeat="items in api">
<ul>
<li>{{api?.ingredientLines}}</li>
</ul>
</div>
</ion-item>
</ion-list>
</ion-content>
If someone could point out where I'm going wrong that would be great!
Try to repeat the right object in the right HTML-Element and you will be fine. Here is a abstract working fiddle of what you try to achieve.
<div class="ingredients">
<ul>
<li *ngFor="let item of api?.ingredientLines">{{item}}</li>
</ul>
</div>
Related
I am using ionic -v1 for my app. This is my code for showing data in two side by side columns.
<div class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
The problem is it is showing only two results.
Can u please tell me y is that and how to fix this.?
And how can i use image-cards instead of article.?
i have use when two column display
angular-masonry
the demo follow this Link
if you implement then you can use image-cards instead of article
Your code something like that after implement the angular-masonry
<div masonry class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
I have the following code, I want to add 1 to the current index of the second Name, because if I don't, it will output the same name in a single line. How do I add to the current index of ngRepeat?
<ul id="speakerlist" ng-repeat="data in result">
<li>
<div class="col">
<h3>{{data.Name}}</h3>
</div >
<div class="col">
<h3>{{data.Name | $index+1}}</h3>
</div>
</li>
</ul>
I solved this by using jQuery, but I want to do it in angularjs way.
EDIT: additional info
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"Michael Jordan"},{"Name":"Kobe Bryant"},{"Name":"Kevin Durant"},{"Name":"Stephen Curry"} ];
});
The result I want Is:
Michael Jordan Kobe Bryant
Kevin Durant Stephen Curry
If I understand correctly, you want to display a li for every two items. You can do it something like this:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col">
<h3>{{result[$index].Name}}</h3>
</div >
<div class="col">
<h3>{{result[$index + 1].Name}}</h3>
</div>
</li>
</ul>
Of course you would also have to include some kind of check if the $index can reach the last one (if the collection has an un-even amount of items)
See this jsfiddle
You could even remove the double col html if you don't like duplicate html code:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col"
ng-repeat="item in [result[$index], result[$index + 1]]">
<h3>{{item.Name}}</h3>
</div >
</li>
</ul>
Try this code <h3>{{data.Name }} {{$index+1}}</h3> instead of your code
<h3>{{data.Name | $index+1}}</h3>
The result format looks like
Ramesh
Ramesh1
Rajendran
Rajendran1
I think you can make it simple this way.
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"hari"},{"Name":"ram"} ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ul id="speakerlist" ng-repeat="data in result track by $index">
<li>
<div class="col">
<h3 >{{data.Name}} {{data.Name+1 }}</h3>
</div >
</li>
</ul>
</body>
">
Why don't you do this ?
<ul id="speakerlist" >
<li ng-repeat="data in result">
<div class="col">
<h3>{{data.Name}}</h3>
</div >
</li>
</ul>
This way you don't need to change de $index, it will be automatic
Our designer has given me jquery flexslider for showing recently viewed items in our project. I need to construct a slider of recently viewed products in angular js, dynamically based on provided flex slider.In my system, recently viewed items are stored as json object( not array).
First of all flexslider is not working, it means sliding feature is not working inside my angular project. I tried to use angular flex slider module from online and tried to iterate my nested object and construct a slider using my data. It is also not working(picture is not showing). My designer asked me to write down a directive, so overall design will not have any problem or any design modification.
Can any of you can help me regarding this
Jquery flex slider dynamic part inside partial as follows
<<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Angular flex slider attempt to solve inside partial
<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<flex-slider flex-slide="proMd5 in item.add_to_cart track by $index">
<li>
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</li>
</flex-slider>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
used scripts
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>
<script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>
Use Flexsilder without Angular and try this code:
var slider = $('#slider').data('flexslider');
slider.addSlide(obj, position);
or
$('#slider').flexslider('addSlide', obj[, position]);
Because HTML will be rendering after Flexsilder;
I have a ng-repeat in my page for rendering all my blog posts, which is working fine. What i'd like to have is that on the first iteration in the repeat to also render some random text that will be next to the first of my posts. As it currently stands the random text is rendered next to all the posts. Is there a way to render it only on the first one?
<div ng-repeat="post in blogs | orderBy:post.timestamp:true">
<div class='row'>
<div class='col-md-4 col-xs-12'>
<h4> Welcome to my blog </h4>
<p> Some random text here </p>
</div>
<div class='col-md-8 col-xs-0'>
</div>
<div class="col-md-4 col-xs-0">
</div>
<div class="col-md-6 col-xs-12 post-{{post.id}} blog-posts-teaser" ng-class="{'lastBlogPost': $last}">
<h4><a ng-href="#/blog/{{returnBlogUrl(post.title)}}" class='blog-title'>{{post.title}}</a></h4>
<p>{{post.content | wordLimit:true:200:'...'}}</p>
<p><a class='read-more' ng-href="#/blog/{{returnBlogUrl(post.title)}}" >Read more →</a></p>
</div>
<div class="col-md-2 col-xs-0">
</div>
</div>
</div>
You can use $first the same way that you're using $last.
<p ng-if='$first'> Some random text here </p>
Use $first inside the ng-repeat-ed block. This variable is set to true in case of the first item of the collection.
Documentation
$first - boolean - true if the repeated element is first in the iterator.
How can i pass the Url.action with parameter from angular object?
refer to new { id ="{{item.Title}}", title = "" } section in code below.
i cant do it like id ={{item.Title}} this renders it as an string.
<div ng-app class="container-fluid">
<div class="row-fluid">
<div ng-controller="MostViewedToolController" class="span2">
<ul class="nav nav-list">
<li><h4><b>Most Viewed</b></h4></li>
<li ng-repeat="item in tools">
{{item.Title}}
</li>
</ul>
</div>
#RenderBody()
</div>
</div>
Please follow the below process, i have implemented it and it's working fine.
< a ng-href="#Url.Action("Index","home")?id={{item.ID}}&title={{item.Title}}"> link_name < / a>
This fixed it.
<a ng-href="#Url.Action("Index", "home"){{item.ID}}/{{item.Title}}"> {{item.Title}}</a>