I'm trying to detect which property is selected/clicked out of ngFor , which comes from a REST API.
I want to get which property(broker.username) is selected out of others
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list"> {{broker.username}}</li>
</ul>
</div>
this is the REST call
[
{ id: 1, username: "PersonA"},
{ id: 2, username: "PersonB"}
]
You have to use event handler on anchor tag like this:
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list">
<a (click)="onSelect(broker)" href="#" class="list-group-item list-group-item-action" style="text-align: center;"> {{ broker.username }}</a>
</li>
</ul>
</div>
Within your component add method:
#Component({ })
class XYZ {
// ... some code
public onSelect(broker) {
// Do what you need with broker?
}
}
Pass the broker directly in the method, like this
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list"> {{broker.username}}</li>
</ul>
</div>
There are several ways, one of those would be to do something like this.
1) Add click handler on a tag:
<div class="list-group">
<ul *ngFor="let broker of brokers">
<li class="broker_list"> {{broker.username}}</li>
</ul>
</div>
2) Add method to component:
selected(brokerName: string) {
console.log(brokerName);
}
You could add a (click) property that calls a function, which takes a broker as a parameter. You can then access the username of that broker.
{{broker.username}}
The a tag should be able to know what the current broker is, since it is inside the *ngFor.
Related
How to send item from v-for to slot? In vue.js.
ListComponent:
<ul>
<li v-for="item in list">
<slot></slot>
</li>
</ul>
Page view:
<list-component :list="list">
<span v-text="item.value"></span>
</list-component>
Code <span v-text="item.value"></span> can't access item (from component's scope). Is it a way to send an item from component to code in tag?
P.S. I know, that as a workaround I can send $index from component to parent view, but it's a little bit hacky
UPD: Example of my current workaround (somebody may find this useful):
Declare index in view's data:
data () {
return {
index: 0,
list: [ ... ]
}
Add to index param to the view's template:
<list-component :list="list" :index="index">
<span v-text="list[index].value"></span>
</list-component>
Declare index in component's props:
props: {
index: {
type: Number
}
}
Add index to v-for's element:
<ul>
<li v-for="item in list" index="$index">
<slot></slot>
</li>
</ul>
the bind expression is compiled in the context who define them,so:
v-text="item.value"
can not be compiled because in Page view there is no "item" defined.
maybe you can try to change your code structure like below:
ListComponent:
//content in component
<span>i am text in component,item value is:{{item.value}}</span>
<slot></slot>
Page view:
<ul>
<li v-for="item in list">
<list-component :item="item"></list-component>
</li>
</ul>
Problem:
I have an unordered list of items which are returned from a json call and are output using ng-repeat. Each one of these items has a class name (there are about 9 categories).
I have a second unordered list which is simply a list of available categories.
Aim:
I want to be able to select one of the categories in the right hand list, which will apply a filter to the actual list of returned elements. This should be activated via a toggle (so click once: filtered, click again: filter removed). So it is simply looking to match the classname in the clicked element, to the elements that share the same classname in the list of json data.
I cannot use ng-model (as this is reserved for certain form elements).
For my jsfiddle I am simply using static html.
Here is my angular code:
/* angular custom filter on returned ajax api data */
var app = angular.module('app', []);
app.controller('main', function($scope) {
$scope.chFilters = {};
$scope.links = [
{name: 'atm'},
{name: 'internet'},
{name: 'mobile'},
{name: 'sms'},
{name: 'postal'}
];
$scope.channels = ["ATM", "INTERNET", "SMS", "POSTAL","MOBILE"];
});
(this is based on another question I found on SO). Unfortunately the fiddle is a bit messy and has some extraneous code in it.
HTML:
<div ng-app="app">
<div ng-controller="main">
<ul>
<li class="atm">Some stuff ATM</li>
<li class="internet">Some stuff INTERNET</li>
<li class="sms">Some stuff ATM</li>
<li class="atm">Some stuff ATM</li>
<li class="postal">Some stuff POSTAL</li>
<li class="atm">Some stuff ATM</li>
<li class="internet">Some stuff INTERNET</li>
<li class="postal">Some stuff POSTAL</li>
<li class="postal">Some stuff POSTAL</li>
<li class="atm">Some stuff ATM</li>
<li class="sms">Some stuff SMS</li>
<li class="mobile">Some stuff MOBILE</li>
<li class="internet">Some stuff INTERNET</li>
<li class="mobile">Some stuff MOBILE</li>
</ul>
<ul class="channel-filters">
<li ng-repeat="link in links | filter:chFilters" class="{{link.name | lowercase}}"><a ng-click="chFilters.name = link.name">{{link.name | uppercase}}</a></li>
<li class="last" ng-click="chFilters.name = ''">CLEAR FILTER</li>
</ul>
<ul>
<li ng-repeat="channel in channels | filter:chFilters">
<strong>{{channel}}</strong>
<a ng-click="chFilters = channel">{{channel}}</a>
</li>
</ul>
<!-- original -->
<ul>
<li ng-repeat="link in links | filter:chFilters">
<strong>{{link.name}}</strong>
<a ng-click="chFilters.name = link.name">{{link.name}}</a>
</li>
</ul>
</div>
</div>
This is the actual HTML from the application (with the call to the api).
<ul class="accordion">
<li class="search-text-channel">
<input type="textarea" ng-model="searchTextChannel.$" placeholder="Search"/>
</li>
<li ng-repeat="day in interactions.model.byDay | filter:searchTextChannel" ng-click="hidden = !hidden" ng-init="hidden = false" class="{{day.channel | removeSpace | lowercase}}" ng-class="{'closed': !hidden, 'open': hidden}">
<span class="date">{{day.date}}</span>
<span class="subheading">{{day.channel}}</span>
<ul ng-show="hidden">
<li ng-repeat="interaction in day.interactions">
{{interaction.time}} {{interaction.description | removeUnderscore}}
</li>
</ul>
</li>
<li class="load-more">
<i class="fa fa-plus"></i>LOAD MORE
</li>
</ul>
I have managed to recreate this functionality in jquery, but I think it would be better to implement an angular solution in an angular application.
I've tried researching and also attempted to implement show/hide as well as a custom filter, but so far no joy.
Here is my (messy) jsfiddle
<ul>
<li ng-repeat="channel in channels | filter:chFilters.name">
<strong>{{channel}}</strong>
<a ng-click="chFilters = channel">{{channel}}</a>
</li>
</ul>
<!-- original -->
<ul>
<li ng-repeat="link in links | filter:chFilters.name">
<strong>{{link.name}}</strong>
<a ng-click="chFilters.name = link.name">{{link.name}}</a>
</li>
</ul>
Update Plunker
Let me know if you have any question on this.
Here is part of the solution:
Suppose your items look like this:
$scope.items = [
{ class: "atm", label: "Some stuff ATM" },
{ class: "internet", label: "Some stuff INTERNET" },
{ class: "sms", label: "Some stuff SMS" },
{ class: "postal", label: "Some stuff POSTAL" },
...
];
To show a filtered list (only filtering by a single channel for now): create a separate list in the scope, with the filters applied:
$scope.click = function(name) {
$scope.chFilters.name = name;
$scope.filteredItems = $scope.items.filter(function(item) {
return item.class === $scope.chFilters.name;
});
};
Call this click handler from the bottom list:
...<a ng-click="click(link.name)">{{link.name | uppercase}}</a>....
And show filteredItems in the top list:
<ul>
<li ng-repeat="item in filteredItems" ng-class="item.class">{{item.label}}</li>
</ul>
So this is really just a starting point, it should be extended to handle multiple filters, etc...
How can I get the id of a component in AngularJS ?
HTML
<li class="list-group-item" id="person_2" ng-click="invitePerson(this)">
<span class="label label-primary">A</span> Alexandre Dolabella Resende
</li>
JS
$scope.invitePerson = function(id) {
alert(id);
};
The alert returns [Object object], how can I access my component ID ? (in my case, should be person_2)
Console.log
Use $event to get the eventhandler param. From that param we can get the target element and its attributes
<li class="list-group-item" id="person_2" ng-click="invitePerson($event)">
<span class="label label-primary">A</span> Alexandre Dolabella Resende
$scope.invitePerson = function(e){
alert(e.target.id);
}
You can use ng-init or your controller to initialize the value. Then define a model, and you can then pass that model into a controller function, such as invitePerson
Working Plunker
HTML:
<ul>
<li class="list-group-item" id="person_2"
ng-init="person_2=5"
ng-model="person_2"
ng-click="invitePerson(person_2)">
<span class="label label-primary">A</span> Alexandre Dolabella Resende
</li>
</ul>
JS:
app.controller('MainCtrl', function($scope) {
$scope.invitePerson = function(id){
alert(id);
}
When I see "person_2" I immediately think of ng-repeat and maybe you should too if you want to iterate over object in your partial, http://plnkr.co/edit/b6ZePD826FauaY9x8b9p?p=preview
<label for="list">List</label>
<ul id="list">
<li class="list-group-item" id="person{{$index}}" ng-click="invitePerson(person)" ng-repeat="person in persons">
<span class="label label-primary">{{person.label}}</span> {{person.name}}
</li>
</ul>
<label for="invited">Invited</label>
<ul id="invited">
<li ng-repeat="invite in invited track by $index">{{invite.name}}</li>
</ul>
I'm testing Sortable.js lists with this small example. I have a list of elements to be dragged from, and another list to store them by dropping the elements.
NOTE: Sortable.js is different from JQuery-ui sortable, but the lack of Sortable.js documentation is making me consider switching to JQuery-ui Sortable, so I would accept an answer using it.
The thing is, the drop area is the list, and it is a bit frustrating dropping over the edged of that list panel and not getting the item correctly dropped. Also, it is hard to find the list when empty if it has no borders.
Sortable.js has an attribute named ghostClass, and according to the documentation it should store the class name for the drop placeholder.
So I'm using the class name of the second list panel as the ghostClass for the first list. Nevertheless, it is not working, and item only get correctly dropped when over the list and not over the panel.
HTML:
<div class="panel panel-primary">
<div class="panel-heading">Fruit store</div>
<div class="panel-body">
<ul id="fruit-list" class="list-group">
<li href="#" class="list-group-item" data-type="apple">Apple</li>
<li href="#" class="list-group-item" data-type="pear">Pear</li>
<li href="#" class="list-group-item" data-type="banana">Banana</li>
<li href="#" class="list-group-item" data-type="watermellon">Watermellon</li>
</ul>
</div>
</div>
<div class="panel panel-primary droppable-area">
<div class="panel-heading">Shopping cart</div>
<div class="panel-body">
<ul id="cart-list" class="list-group">
<li href="#" class="list-group-item" data-type="banana">Banana
<div class="pull-right"> <span id="badge" class="badge">5</span>
</div>
</li>
<li href="#" class="list-group-item" data-type="pear">Pear
<div class="pull-right"> <span id="badge" class="badge">2</span>
</div>
</li>
</ul>
</div>
</div>
JS:
// Create fruit store list
var list_element = document.getElementById("fruit-list");
var fruit_list = new Sortable(list_element, {
group: {
name: "fruit_group",
pull: 'clone',
put: false
},
sort: false,
ghostClass: "droppable-area",
});
// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
group: {
name: "fruit_group",
pull: true,
put: true
},
});
Any idea? Here is a working JSFiddle.
This is what the ghostClass setting does:
When dragging an object sortablejs creates a placeholder where the item will be dropped if you let it go that instant. That placeholder will get the class set to it of the ghostClass value.
In your case:
Remove the 'droppable-area' class name in your panel-div.
Create css: .droppable-area { border: 1px solid black; }
Now you'll see a dashed-box of where you'll item wil end up if you'll stop dragging.
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>