how to simplify template in angularjs? Here there are three different variants lie within podgruzki data objects, but depending on different objects IF loaded with different sets of properties. Is it possible to simplify both the template
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'A'">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)">
<span ng-attr-title="{{node.a}}">{{node.a}}</span>
</li>
</ul>
</div>
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'B'">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched() " ng-mousedown="add(this)">
<span ng-attr-title="{{node.b}}">{{node.b}}</span>
</li>
</ul>
</div>
<div class="suggest" ng-show="showSuggest" ng-if="$ctrl.Name == 'C'">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)">
<span ng-attr-title="{{node.C}}">{{node.C}}</span>
</li>
</ul>
</div>
Let's say you normalize your node and name to be 1 to 1. So if your controller name is "a" or "Foo", then your node will have a property named a or Foo.
Then you will be able to reduce your template to the following:
<div class="suggest" ng-show="showSuggest">
<ul class="height-list">
<li ng-repeat="node in $ctrl.Searched()" ng-mousedown="add(this)">
<span ng-attr-title="{{node[$ctrl.Name]}}">{{node[$ctrl.Name]}}</span>
</li>
</ul>
</div>
Related
I am tring to develop my own collapsible tree view as a way to learn Angular 2. I have it partly working. Right now I am stuck on how to apply the hidden property to on the specific <li> item that has been clicked on. Here is what I have so far.
This is the html that displays the items to go in the list.
<div>
<ol>
<li *ngFor="let item of videoList">
<div>
<a *ngIf="item.nodes && item.nodes.length > 0" (click)="toggle()">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol [hidden]="!collapsed">
<li *ngFor="let subItem of item.nodes">
<a *ngIf="subItem.nodes && subItem.nodes.length > 0" (click)="toggle()">{{subItem.title}}</a>
<a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
<ol [hidden]="!collapsed">
<li *ngFor="let video of subItem.nodes">
<a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
<a *ngIf="video.nodes <= 0">{{video.title}}</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
and here is the typescript in the component that collapses or expands the list.
collapased = false;
toggle() {
this.collapsed = !this.collapsed;
}
currently the code collapses and expands the top level elements together and the second level elements together. I need to make each item in the list independent of the other ones. I also prefer to stay away form using CSS to achieve this.
If you add a new property in your front-end model, assuming you are using a front-end model, then you can toggle the items one at a time:
export class Item {
constructor (
public nodes: Node[],
public hidden: boolean) {}
}
<div>
<ol>
<li *ngFor="let item of videoList">
<div>
<a *ngIf="item.nodes && item.nodes.length > 0" (click)="item.hidden = !item.hidden">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol [hidden]="!item.hidden">
…
If you're not using a model like that, then the only other thing I can think of is creating a unique id tag for each by using whatever unique id comes with your data:
<a id="{{node.id}}"> </a>
Then you can hide and show based on the id property of those elements. I'm out of ideas, but I'm sure someone else will help!
I have a list of JavaScript objects "hard coded for them moment" each object has properties id: 1, title: something, collapsed: true, and nodes: [] I added the collapsed property to each node and did the following in my html.
<div>
<ol>
<li *ngFor="let item of videoList">
<div (click)="item.collapsed = !item.collapsed">
<a *ngIf="item.nodes && item.nodes.length > 0">{{item.title}}</a>
<a *ngIf="item.nodes <= 0">{{item.title}}</a>
</div>
<ol >
<li *ngFor="let subItem of item.nodes" [hidden]="item.collapsed">
<div (click)="subItem.collapsed=!subItem.collapsed">
<a *ngIf="subItem.nodes && subItem.nodes.length > 0">{{subItem.title}}</a>
<a *ngIf="subItem.nodes <= 0">{{subItem.title}}</a>
</div>
<ol>
<li *ngFor="let video of subItem.nodes" [hidden]="subItem.collapsed">
<div>
<a *ngIf="video.nodes && video.nodes.length > 0">{{video.title}}</a>
<a *ngIf="video.nodes <= 0">{{video.title}}</a>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
basically what is happening is I am changing the collapsed property of the selected node.
I have been trying to work out how to produce a list, where if you click on one of the objects in the list, it becomes active. I have managed to get it working in the non-dynamic version of the code with ease. However, working on AngularJS dynamic version, I just can't seem to get it to work. The data is ok, so it can't be data related, it has to be my dynamic code that is not working.
This is a working piece of code (however not dynamic)
<ul class="nav nav-pills" ng-init="catVal = 1">
<li ng-class="{active: catVal===1}">
Category 1
</li>
<li ng-class="{active: catVal===2}">
Category 2
</li>
<li ng-class="{active: catVal===3}">
Category 3
</li>
</ul>
Now What I really want is an AngularJS dynamic version of this code. This is what I have tried and failed so far.
<ul class="nav nav-pills">
<li ng-repeat="category in model" ng-init="catVal = 1" ng-class="active: catVal === category.catID ">
{{category.catName}}
</li>
</ul>
The catID is associated with the category and should give the same results as the previous list. I get the names in the correct place, just the value is not working.
try this.
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.rowIndex = -1;
$scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"asd","score":10}];
$scope.selectRow = function(index){
if(index == $scope.rowIndex)
$scope.rowIndex = -1;
else
$scope.rowIndex = index;
}
});
.active{
background-color:#a11af0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<ul class="nav nav-pills" ng-init="catVal = 1">
<li ng-repeat="item in items" ng-class="{'active':rowIndex == $index }" ng-click="selectRow($index)">
{{item.name}}
</li>
</ul>
</div>
So i loaded the json and now i cant display it and it says not well-formed. But i'm not really sure what to write in html.
here is my js:
app.controller('jsonController', function($scope, $http) {
$http.get('podaci.json').success(function(data) {
$scope.gradovi = data;
});
});
and html:
<div ng-controller = "jsonController">
<ol>
<li ng-repeat="gradovi in ponudjene">
{{gradovi.ponudjene}}
</li>
</ol>
</div>
and this is json:
{
"ponudjene": [
"Ada",
"Adaševci",
"Žitni Potok",
"Žitorađa",
"Zlatibor",
"Zlatica",
"Zlodol",
"Zlot",
"Zmajevo",
"Zminjak",
"Zrenjanin",
"Zubin Potok",
"Žuč",
"Zuce",
"Zvečan",
"Zvezdan",
"Zvonce",
"Đala",
"Đunis",
"Đurđevo",
"Đurđin"
],
"tacno": [
"Zvezdan",
"Zvezdan",
"Bor",
"Rudna Glava",
"Majdanpek"
],
"vreme": 100,
"oblast": "Istocna srbija"
}
Try like this
<ol>
<li ng-repeat="item in gradovi.ponudjene">
{{item}}
</li>
<li ng-repeat="item in gradovi.tacno">
{{item}}
</li>
<li>
{{gradovi.vreme}}
</li>
<li>
{{gradovi.oblast}}
</li>
</ol>
Not sure what your json data looks like, but your $scope is "gradovi", so your li should look something like this:
<li ng-repeat="item in gradovi">
{{item.name_of_field_in_your_json}}
</li>
UPDATE:
Now that I see your json data. Here is the fiddle:
http://jsfiddle.net/RkykR/778/
Found it!Thank u all for help! :)
<ol>
<li ng-repeat="item in gradovi.ponudjene track by $index">
{{item}}
</li>
</ol>
I did an ng-repeat on a ul.
Obviously, I cant use nth-child(even) to apply it on ul to change the background-color of the even ul
Anyone knows something similar
ngRepeat exposes the boolean $even and $odd properties, which you can combine with ngClass:
<ul>
<li ng-repeat="item in items" ng-class="{'some-class':$odd}">
{{item.someText}
</li>
</ul>
Note: $even and $odd are based on the currnt $index which is zero-based, so you might need to use $odd instead of $even.
Or you can use the ngClassEven / ngClassOdd directives:
<ul>
<li ng-repeat="item in items" ng-class-even="'some-class'">
{{item.someText}
</li>
</ul>
See, also, this short demo.
Try this out
Working Demo
html
<div ng-app="">
<div ng-init="predicate='name'; reverse=false;">Sort: predicat:{{predicate}} reverse:{{reverse}} </div>
<div ng-click="reverse=!reverse">[change reverse]</div>
<div ng-click="predicate='name'; reverse=!reverse;">[set predicate: name + change reverse]</div>
<div ng-click="predicate='id'; reverse=!reverse;">[set predicate: id + change reverse]</div>
<div ng-init="lines=[{'name':'eee', 'id':7}, {'name':'aaa', 'id':9}, {'name':'ccc', 'id':8}, {'name':'bbb', 'id':2}, {'name':'ddd', 'id':3}]">
<ul ng-repeat="line in lines | orderBy:predicate:reverse" ng-class-odd="'odd'" ng-class-even="'even'">
<li >{{ line.name }}</li>
</ul>
</div>
</div>
Output
I have loads of VBScripts that I plan to give a GUI front end (using an HTA). At the top of the HTA's window I have a drop down menu bar created as follows (haven't included CSS code as I don't think that it adds any relevent information).
I have been trying for sometime but have been unable to work out how I can pass the value of the id of the clicked li to the MenuClicked subroutine.
My previous experience with HTML was using it to create static documents so I might have got this all wrong. If that is the case then please let me know.
<script type="text/VBScript">
Sub MenuClicked()
Select Case WhatDoIPutHere
Case "#Option1A" : Sub_Option1A
Case "#Option1B" : Sub_Option1B
Case "#Option2A" : Sub_Option2A
Case "#Option2B" : Sub_Option2B
Case "#Option3" : Sub_Option3
End Select
End Sub
</script>
<div>
<ul id="nav" class="drop" onClick="MenuClicked()">
<li><a>Option1A</a>
<ul>
<li id="#Option1A"><a>Option 1A</a></li>
<li id="#Option1B"><a>Option 1B</a></li>
</ul>
</li>
<li><a>Option 2</a>
<ul>
<li id="#Option2A"><a>Option 2A</a></li>
<li id="#Option2B"><a>Option 2B</a></li>
</ul>
</li>
<li id="#Option3"><a>Option 3</a></li>
</ul>
</div>
Since HTAs are run by an Internet Explorer engine, you should use the srcElement property
<script type="text/VBScript">
Sub MenuClicked()
Dim target
' .parentNode because the <a> element is really what's being clicked,
' but we want the ID of the <li> element
Set target = window.event.srcElement.parentNode
Select Case target.id
Case "#Option1A" : Sub_Option1A
Case "#Option1B" : Sub_Option1B
Case "#Option2A" : Sub_Option2A
Case "#Option2B" : Sub_Option2B
Case "#Option3" : Sub_Option3
End Select
End Sub
</script>
<div>
<ul id="nav" class="drop" onClick="MenuClicked()">
<li><a>Option1A</a>
<ul>
<li id="#Option1A"><a>Option 1A</a></li>
<li id="#Option1B"><a>Option 1B</a></li>
</ul>
</li>
<li><a>Option 2</a>
<ul>
<li id="#Option2A"><a>Option 2A</a></li>
<li id="#Option2B"><a>Option 2B</a></li>
</ul>
</li>
<li id="#Option3"><a>Option 3</a></li>
</ul>
</div>
Here's how I would do it:
<script type="text/VBScript">
Sub MenuClicked(obj)
Select Case obj.id
Case "#Option1A" : Sub_Option1A
Case "#Option1B" : Sub_Option1B
Case "#Option2A" : Sub_Option2A
Case "#Option2B" : Sub_Option2B
Case "#Option3" : Sub_Option3
End Select
End Sub
</script>
<div>
<ul id="nav" class="drop">
<li><a>Option1A</a>
<ul>
<li id="#Option1A" onClick="MenuClicked Me"><a>Option 1A</a></li>
<li id="#Option1B" onClick="MenuClicked Me"><a>Option 1B</a></li>
</ul>
</li>
<li><a>Option 2</a>
<ul>
<li id="#Option2A" onClick="MenuClicked Me"><a>Option 2A</a></li>
<li id="#Option2B" onClick="MenuClicked Me"><a>Option 2B</a></li>
</ul>
</li>
<li id="#Option3" onClick="MenuClicked Me"><a>Option 3</a></li>
</ul>
</div>