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"}]
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.
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 using Angular 1.6.1. The goal is to click on a list item, and it shows the tab number. This bit of code doesn't work on its own:
<ul>
<li ng-click="tab = 1" >
Thing 1
</li>
<li ng-click="tab = 2" >
Thing 2
</li>
</ul>
<p>{{tab}}</p>
However, once we add this, it works:
<html ng-app="">
</html>
And it even works when the ul is outside the ng-app scope. So:
<ul>
<li ng-click="tab = 1" >
Thing 1
</li>
<li ng-click="tab = 2" >
Thing 2
</li>
</ul>
<p>{{tab}}</p>
<html ng-app="">
</html>
Does not work when element is a div:
<div ng-app="">
</div>
Am I just mixing up an understanding of some low-level HTML functionality, or how is this working?
ng-app bootstraps Angular on your code. You can put it on the body tag if you prefer, but your Angular code must be in that block.
I would not say that "ng-app acts like an on/off switch", and I do not recommend using it like this.
If you want to "activate/desactivate" some parts of your code, you should use ng-if (or other, it depends of your needs).
From the examples you provided:
Example 1
It does not as Angular is not bootstraped in your application (as explained before)
Example 2
It works, as it is the good way to write your code
Example 3
It is probably the most strange:
As your document is not well-written and not HTML valid, your code is rewritted by your browser. So:
<ul>
...
</ul>
<p>{{tab}}</p>
<html ng-app="">
</html>
Becomes
<html ng-app="">
<ul>
...
</ul>
<p>{{tab}}</p>
</html>
Example #4
It does not work, as your Angular code is not inside this div (and it is not rewritted by your browser like Example #3).
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>
angular.js is great for complex client side JavaScript based web applications, but I also thinking about to use it for smaller simple JavaScript tasks.
For example I have a list with some items:
<ul>
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
Now I want to add some buttons to the HTML which should filter and/or sort the list after some user input, which should be an easy task.
Is there any way to extract the data from existing HTML elements to use them with angular.js? The data need to be in the HTML, so search engine could also get a hold of whats
Edit for clarity:
The end result would be that the data from the ul list will be pushed into a model of the controller that handling the list. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
If I push more objects into the model, the list should display them.
If I apply a filter to the model it should filter the li elements.
Best case scenario would be something similar to this:
<div ng-model="data">
<ul ng-repeat="object in data | filter:filterCriteria">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
<li data-id="{{object.id}}">{{object.text}}</li>
</ul>
</div>
Okay. Apparently there is no way to this in a default Angular.js application.
I ran into the same problem in a project I'm working on. My solution was to add the data from the html to a variable in my angular controller and then hide the initial html. This method keeps the original list in the html for SEO, old browsers and users without javascript. It replaces this list with an angular generated one for other users.
A working example using your code is pasted below or you can see it at this link.
I'm aware this is an old question so my answer might not be of help to the initial poster. My solution is aimed at anyone else who runs into the same problem we did.
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app">
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Ctrl($scope) {
$scope.objects = [];
$scope.init = function(){
$("ul.data").hide();
$("ul.data li").each(function(){
var $this = $(this);
var newObject = {
name: $this.html(),
id: $this.attr("data-id")
};
$scope.objects.push(newObject);
});
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl" ng-init="init()">
<ul>
<li ng-repeat="object in objects" data-id="{{object.id}}">{{object.name}}</li>
</ul>
<ul class="data">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
</div>
</div>
</body>
</html>
If I am understanding the question correctly, you could just use the angular.element().scope for the html element in question.
I use this method for certain interaction that can't be handled directly out of the box with angular.