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>
Related
I'm now writing a web page with Vue on Nuxt to replace the old one.(VScode)
And I faced the problem that when I used v-for to create lists,
inside the tag there's a unknown string(attribute).
And this unknown string seemed to effect my CSS, so it really bothers me.
p.s.
I'm rookie on web design.
I guess is the v-bind key, which I haven't fully understood effects the result
Thanks for your answering!
The unknown string(attribute): data-v-768556b7=""
<a data-v-768556b7="" href="#">Notebook</a>
And here's part of my code:
<div class="prod-sub-menu products-menu sub-menu">
<ul class="sub-nav">
<li
v-for="(pName, index) in productMenuList"
:id="pName.idName"
:key="index"
class="prod-sub-item sub-item current"
>
<a :href="pName.url">{{pName.menuName}}</a>
<ul v-for="(subName,index2) in pName['subMenu']" :key="index2">
<li>
<a :href="subName.url">{{subName.subMenuName}}</a>
</li>
</ul>
</li>
...
...
As much as I know the data-v string appears when you're using scoped css.
Here is the documentation for it: https://vue-loader.vuejs.org/guide/scoped-css.html
Are you by any chance using
<style scoped>
/* Your css here */
</style>
If you are, that might be the problem. Try just removing the scoped word.
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 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
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 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>