I'm trying to use ng-if in angular.js. I have a json file:
"data":[{
"status":"true",
"name":"blabla",
"group":true,
"group_id":"123gr",
"id":"xx1"
},{
"status":"true",
"name":"blabla2",
"group":false,
"id":"123gr",
"group_id":"null"
}]
And from this JSON I try to get a list of all groups (group in JSON must set be true) and then list group's elements. So I want to have a list that looks:
Group: blabla2.
Element 1: blabla. Status: true
I tried to list just a group name.. in this way:
<ul>
<div ng-repeat="resp in response.data">
<li ng-if="{{resp.group}} === 'false'">
Group: {{resp.name}}
</li>
</div>
</ul>
Unfortunately it does not work. Do you have any idea what I did wrong?
Thank you for your help,
Luke
Or you could remove those altogether if you don't need them by filtering them out of ng-repeat
<ul>
<li ng-repeat="resp in response.data | filter: {group: true}">
Group: {{resp.name}}
</li>
</ul>
Use like this
<ul>
<div ng-repeat="resp in response.data">
<li ng-if="!resp.group">
Group: {{resp.name}}
</li>
</div>
</ul>
Related
I have a sample json,I need to create a sidebar using ul li tag and value comes from json.My json structure is something like this.
{"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}.I have already done in angularjs here http://plnkr.co/edit/D8M1U81tVz3UuzjWathk?p=preview , but This does not work in angular 6.Can anyone please help me,I am new in angular,Here is the code below
app.html
<ul *ngFor="(x, y) of items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li *ngFor="p of y.value">{{p}}</li>
</ul>
</li>
</ul>
app.ts
export class Heroes {
let items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}};
}
I suggest you to work with an iterable objects when you try to use *ngFor in your html component.
So, that's my solution:
<ul *ngFor="let parent of (items.filter | keyvalue)">
<li class="parent">{{ parent.key }}</li>
<ul *ngFor="let child of (parent.value.value | keyvalue)">
<li class="child">{{ child.value }}</li>
</ul>
</ul>
First of all I used the keyvalue pipe from angular (https://angular.io/api/common/KeyValuePipe) after that you are allowed to iterate your json object as you want without change it.
Also, here I leave an example of how it works (https://stackblitz.com/edit/angular-gqaaet)
You need to change the json format.
items = {"filter":
[{
"name":"Category1",
"value":["one","two","three"]
},
{
"name":"Category2",
"value":["four","five","six"]
}
]};
HTML
<ul *ngFor="let item of items.filter">
<li class="parent"><b>{{item.name}}</b></li>
<li class="child">
<ul>
<li *ngFor="let p of item.value">{{p}}</li>
</ul>
</li>
</ul>
The above code would work. *ngFor works with the iteration protocols, the json format you've added has map(filter) of map(category) of map(value) format, where the values are not obtained to be iterated.
JS fiddle: http://jsfiddle.net/ernestsoo22/qqgj9jf5/1/
I have a ng-repeat in my code like this:
<ul>
<li ng-repeat=" opt in courses">
{{$index}}
</li>
</ul>
With this, I am able to get the output of:
0 , 1 , 2 , 3
Problem: Using a filter like such does not get the $index that I want:
<ul>
<li ng-repeat=" opt in courses | filter:{code:'INF'}" >
{{$index}}
</li>
</ul>
With this filter I get the $index of (refer fiddle):
0 , 1
Instead of this, what I am looking for is to get the actual index of the courses json object. So according to the filter, the output would be:
2 , 3
How can I achieve this while using a filter?
Use ng-if="opt.code.indexOf('INF')>=0" in li to check the filter to check the INF present
function TodoCtrl($scope) {
$scope.courses = [
{"code":"ICT10001","description":"Problem Solving with ICT","credits":"12.5","type":"Core"},
{"code":"COS10005","description":"Web Development","credits":"12.5","type":"Core"},
{"code":"INF10003","description":"Introduction to Business Information Systems","credits":"12.5","type":"Core"},
{"code":"INF10002","description":"Database Analysis and Design","credits":"12.5","type":"Core"}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat=" opt in courses" ng-if="opt.code.indexOf('INF')>=0" >
{{$index}}
</li>
</ul>
</div>
</div>
<li ng-repeat=" opt in courses">
<span ng-if="opt.code==='INF'">{{$index}}</span>
</li>
Does that fix it?
I have this dynamic list created with ngFor. When I click on item I want to expand it with new dynamic list, but only for that item. In my following code it expends for every item in the first list. I understand why that is happening, but I don't have ideas how to solve it.
Here is my code
<ul *ngFor="let p of portList">
<li (click)="setONUList(p.name)" id="{{ p.name }}"><img src="app/resources/{{ p['oper-status'] }}.png" class="myimage"/>{{ p.name}}</li>
<ol *ngFor="let onu of portONUList">
<li><img src="app/resources/{{ onu['oper-status'] }}.png" class="myimage" />{{ onu.name}}</li>
</ol>
</ul>
Any ideas how to solve this would be very helpful.
From what I understand, the subarray is the same which is shown for all your items, so there is no relation between the nested array and the outer array.
My suggestion would actually be to add a new property in your array, e.g expanded... so e.g your outer array would look like:
portList = [{id:1,name:'one',expanded:false},{id:2,name:"two",expanded:false}];
And then your HTML:
<ul *ngFor="let p of portList">
<li (click)="expand(p)">{{ p.name}}</li>
<div *ngIf="p.expanded">
<ol *ngFor="let onu of portONUList">
<li>{{ onu.name}}</li>
</ol>
</div>
</ul>
And on click, toggle the expanded property:
expand(p: any) {
p.expanded = !p.expanded;
}
Of course if you want to have a "quick" solution you could rely on HTML5 with no need of the new property:
<details *ngFor="let p of portList">
<summary>{{p.name}}</summary>
<ul *ngFor="let onu of portONUList">
<li>{{ onu.name}}</li>
</ul>
</details>
Here's a plunker with both options.
There should be a relation between parent and childlist and the list should be in json format. Refer below code
<ul>
<li ng-repeat="item in parent" ng-click="showChilds(item)">
<span>{{item.name}}</span>
<ul>
<li ng-repeat="subItem in item.subItems" ng-show="item.active">
<span>{{subItem.name}}</span>
</li>
</ul>
</li>
</ul>
Sample JSON FORMAT
let parent= [
{
name: "Item1",
subItems: [
{name: "SubItem1"},
{name: "SubItem2"}
]
},
{
name: "Item2",
subItems: [
{name: "SubItem3"},
{name: "SubItem4"},
{name: "SubItem5"}
]
},
{
name: "Item3",
subItems: [
{name: "SubItem6"}
]
}
];
I want to make multidimensional JSON array. So that when i filter the id i whould get data of the respective id:
for egs: ID 1022101 the view should be
<li>x</li>
<li>y</li>
<li>z</li>
<div ng-app="myapp">
<div ng-controller="w">
<ul ng-repeat="x in data | filter:1022101 ">
<li>{{x.file}}</li>
</ul>
</div>
</div>
controller:
var app = angular.module('myapp',[]);
app.controller('w',function($scope){
$scope.data = [
{"id":"1022101","file":["x","y","z"]},
{"id":"1022102","file":["xa","sy","fz"]}
];
});
Jsfiddle Demo
you can use | filter:{id:1022101} to filter fo the id
jsfiddle
If I understand correctly what you are trying to do then you can use something lik this:
<ul ng-repeat="(id, file) in data | filter:id:1022101 ">
<li>{{file.x}}</li>
<li>{{file.y}}</li>
</ul>
I am not 100% sure I wrote the filter correctly, but you have your value in the id so you can adjust the filter as you need.
If your file is an Json array, you can make another ng-repeat inside your ng-repeat like
<ul ng-repeat="(id, file) in data | filter:id:1022101 ">
<li ng-repeat="xFile in file">{{xFile}}</li>
</ul>
I have an array of objects:
objects = [
{
name: "a",
val: 1
},
{
name: "b",
val: 2
}
]
I'm trying to produce the following HTML with Handlebars:
<ul>
<li> ... </li>
<li> ... </li>
</ul>
If I didn't need the hash, I would do it like this:
<ul>
{{#objects}}
<li> <a {{bindAttr href="name"}}>...</a> </li>
{{/objects}}
</ul>
I can't use href="#name" or href=#"name". Is there a way to get the hash in front of the name property?
<ul>
{{#each item in objects}}
<li> ... </li>
{{/each}}
</ul>
But i'm not sure what you're doing, you probably want to use the link-to helper