I have a json in which I am getting search result with multiple arrays:
After this you can see in the below image that I am getting another array with index [0-20] which actually consist of data I want to display:
with single ng-repeat it does not seems to be possible I guess and after struggling a lot I am here to ask help.
<ul vertilize-container class="grid-menu-list">
<li vertilize class="grid-menu-item explore" ng-repeat="trending in trendings">
<p class="item-title">Title</p>
<p class="sub-title">{{trendings.title}}</p>
</li>
</ul>
I am working on ionic v1. Please help.
Try This way
Js file
$scope.data = {
blog : [],
---
trending : [
----- ]
}
HTML file
<ul vertilize-container class="grid-menu-list">
<li vertilize class="grid-menu-item explore" ng-repeat="t in trending">
<p class="item-title">Title</p>
<p class="sub-title">{{t.title}}</p>
</li>
</ul>
You should use 2 ng-repeat to achieve the desired result. Here is the sample code. You can use any tag you would prefer for markup. (For convenience I used simple div tag with some styling ).
<div style="display: flex; flex-direction: column">
<div ng-repeat="(key, value) in data">
<span> {{key}} </span>
<div ng-repeat="eachValue in value">
<span> Name: {{eachValue.name}} </span>
</div>
</div>
</div>
I have used dummy data for example. Just use your data with appropriate property names to get the desired result. Here is the working example. https://codepen.io/next1/pen/jKQpLV
Related
Quick question.. Im trying to make my html read name property of my object/array, and Im failing.
I have html:
<li ng-repeat="i in data">
<h3>{{data.name}}</h3>
</li>
and I have lib that is:
data = [{"name":"a","code":"12"},{"name":"b","code":"331"},{"name":"c","code":"1231"}]
my html li "ng-repeat="i in data" makes right amount of lists(3). But my h3 doesnt print the names.. what am i missing?
<li ng-repeat="i in data">
<h3>{{i.name}}</h3>
</li>
... scope context
$scope.data = [{"name":"a","code":"12"},{"name":"b","code":"331"},{"name":"c","code":"1231"}]
I'm repeating elements from a big javascript object literal. Currently, I display the tabbed navigation, image, and title for each product correctly. I cannot get the info to display correctly however. I have the following code:
<div ng-repeat="section in tab.sections" class="product">
<div ng-repeat="child in section.children" ng-if="productIsActive(child, $index)">
<div class="additionalProductInfo">
<nav class="secondaryTabbedNavigation">
<ul>
<li class="active" ng-repeat="pTabs in child.productTabs">
<a class="activelink" href="#">{{pTabs.title}}</a> //title of each tab
</li>
</ul>
</nav>
</div>
<div class="productImage">
<img ng-src="{{ child.productImageURL }}"/> //the product image
</div>
<div class="productInfo">
<h2 class="productTitle">{{ child.title}}</h2> //the product title
<div ng-repeat="info in pTabs.infoData" class="productDescription">
<p>
{{info[1]}} //product info goes here.
</p>
</div>
</div>
</div>
</div>
I also tried "{{info}}" , "{{info[i][i]}}", and a couple things using $index. But when "{{info}}" didn't display anything, I figured I was retrieving the data incorrectly.
Here is the "tabs" javascript object that all this info comes from:
As you can see the product info is in a two dimensional array (the first array with the labels of what the information is (e.g. "Title", "Link") and the corresponding information is in the second array. I know this may not be ideal, but this information is currently grabbed from .csv files that prone to changing
and I cannot change how they come into this javascript object.
I know this may seem overcomplicated but this is about as deep as I need to go to get data from the large javascript object and I'm very close.
How can I get the contents from the second array in the two dimensional array (infoData[1]) to display like I did with the tabs, image, and title.
Thank you very much for your time!
I'm trying to use json to populate an html page with angular, right now I have this as my JSON:
[{"listType":"custprof", "prof":"Turkish Government"},
{"listType":"custprof", "prof":"Eren Isaat"},
{"listType":"custprof", "prof":"Mardin, Turkey"},
{"listType":"custprof", "prof":"Canal Irigation channel"},
{"listType":"situation","sit":"Grade Checking limited to working day"},
{"listType":"situation", "sit":"5 grade checkers per machine"},
{"listType":"situation","sit":"Terrain slows accurate grading"},
{"listType":"situation", "sit":"Fine grading requierd multiple passes"},
{"finalImage":"img", "foo":"imgname"}]
and here is my html code
<div ng-repeat="case in case_select" ng-show="case.listType =='custprof'" >
<ul>
<li >{{case.prof}}</li>
</ul>
</div>
<h1>Situation</h1>
<div ng-repeat="case in case_select" ng-show="case.listType== 'situation'">
<ul>
<li>{{case.sit}}</li>
</ul>
</div>
</div>
</div>
Right now I'm using ng-repeat along with ng-show to get specific strings from the JSON file. I am wondering if there is a better/more direct way of returning a specific result from the JSON, rather then looping through the entire thing and hiding specific items. For instance maybe something that looks like this:
<div>{{case.finalImage.foo}}</div>
Perhaps a filter?
<div ng-repeat="case in case_select | filter: {listType:custprof}" >
<ul>
<li >{{case.prof}}</li>
</ul>
</div>
<h1>Situation</h1>
<div ng-repeat="case in case_select | filter: {listType:situation}">
<ul>
<li>{{case.sit}}</li>
</ul>
</div>
I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.
Controller code:
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
View:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/
Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.
I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?
For each iteration of the ng-repeat loop, line is a reference to an object in your array. Therefore, to preview the value, use {{line.text}}.
Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).
Fiddle.
For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
I am new to javascript and especially dojo and I got stuck to, I assume quite simple task, but I just cannot solve it.
Basically what I'm trying to do is the following:
When I click on a listitem I should be sent to another view. I am doing this with:
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="transitionTo('#recommend',1);">Recommend App</li>
Now the div with id=recommend` has got 2 listitems.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</div>
</ul>
I want to make both listitems visible if some particular function returns true otherwise hide 2nd listitem and show just 1st.
I want to know the logic and how to approach this idea of integrating an if-statement together with the div
There is a rather unpoorly documented method of creating event hooks as markup which i will demonstrate here. However it would be better to create a function in your codebase and then set it as a dojoProps attribute, e.g. function myonclick() { ... } and <div data-dojo-type="dijit._Widget" data-dojo-props="onClick: myonclick"></div>.
To achieve this, you need to figure out which events the View widget offers. Easist way to do this is to simply open the dojotoolkit-src/dojox/mobile/View.js file - the ones youre looking for are probably onStartView || onBeforeTransitionIn?
Via markup, we now create dojo/method to onBefore.. so that you may manipulate children in your list. You have a stray closing </div> tag by the way.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</ul>
<script type="dojo/method" event="onBeforeTransitionIn" args="moveTo, dir, transition, context, method">
// onBeforeTransitionIn(moveTo, dir, transition, context, method):
var listWidget = dijit.byNode(dojo.query("#recommended ul")[0]);
// say you have a function with true/false return, if item should show
dojo.forEach(listWidget.getChildren(), function(Item, idx) {
dojo.style(Item.domNode, {
display: showItem(Item) ? '' : 'none'
});
});
</script>
</div>