I'm trying to rewrite a live search feature using AngularJS, but can't find how I can grab the currently clicked item in the list. See below:
<div id="searchResults" ng-show="speaker.list.length > 0">
<ul ng-repeat="person in speaker.list">
<li ng-click="speaker.updateFields()">{{person.name}}</li>
</ul>
</div>
In my speaker.updateFields() method, how do I reference person.name? Is there a different way this should be done?
Thanks.
Pass it in!
<li ng-click="speaker.updateFields(person.name)">{{person.name}}</li>
And the JS
$scope.updateField = function(name) {
//console.log(name)
}
When you use ng-repeat each item is assigned an index value as well.
<div ng-repeat='person in persons'>
{{person.$index}}
</div>
Related
In the table(table) i have loaded objects from API. When i click on "osavotjad" link i am redirected to another component where i want to load data from selected object. How can i pass id of object what is on the same line with a clicked link.
<div class="card-body fixed-content">
<div *ngIf="futureEvents">
<ul>
<li *ngFor="let event of futureEvents">
<span class="name">{{event.eventName}}</span>
<span class="name">{{event.place}}</span>
<span class="date">{{event.eventDate | date:'dd.MM.yyyy'}}</span>
<span><a routerLink="/participants">Osavoitjad</a></span>
<span (click)="delete(event.id)"><img src="assets/remove.svg" class="deleteBtn"></span>
</li>
</ul>
</div>
There are many ways to do that. The easiest solution will be using the router param or query params.
[routerLink]="[participants, event.id]" (this is using parameter)
Or you can use query param in similar way.
I go through an array of objects to display in my html some information boxes that are selectable. For it I bind a class in the event click, but as I obtain the elements through a v-for, when I select one it bind the class to all of them.
How can I differentiate only the selected one?
I have seen several examples with jquery but I would like to know if there is any other method.
My template:
<div class="list-services">
<div class='column-service'
v-for='estimation in filteredEstimation'
v-bind:key="estimation.name"
:class="{ focusService }"
#click="focusService = !focusService"
>
<div class="service-name">
{{estimation.name}}
</div>
<div class="service-description">
{{estimation.description}}
</div>
<div class="service-price">
{{estimation.price}}
<span class="price-currency">€</span>
</div>
</div>
</div>
Thank you very much for your time and help.
I was trying to make a jsfiddle to answer your question, but then I found this jsfiddle on the vue.js forum: https://jsfiddle.net/mogtfpze/2/
It offers three different options for highlighting content by clicking.
li v-for="item in items"
:class="{highlight:item.id == selected}"
#click="selected = item.id">
{{item.id}}
</li>
Although it's an old answer, I believe it should still be compatible with the current Vue version.
If not, or if something is not clear, just let me know and I'll try to help you out!
The method that I use personally (If I understand your question correctly) is the this keyword.
For example:
index.html
<ul id="myList">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
script.js (Vanilla JavaScript)
var myList = document.getElementById("myList");
myList.addEventListener("click", function () {
console.log(this);
console.log(this.innerText);
});
script.js (jQuery)
var myList = $("#myList").on("click", function() {
console.log(this);
console.log(this.innerText);
});
In this case, using the this keyword allows us to get the innerText of the li element that was clicked by only attaching the event listener to the parent element. innerHtml is only one of many ways to use this keyword. You can see more of them by doing console.log(this) in your event listener function.
Let me know if this helps!
So I was working on a webpage using html, css and Angular.js and I wanted to display the page based on what the user has selected on the dropdown list. The "filter" when the user selects his/her choice works perfectly but initially when the page is loaded I could not get the entire page content to be displayed, instead it displays a blank page.
This is a snippet of my code:
<select ng-model="selectedOption" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main" >
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
<li class="cbp-ntopen">
<h3 class="cbp-nttrigger">{{data.name}}</h3>
<div class="cbp-ntcontent">
I'm getting an error like:
angular.js:13708Error: [ngRepeat:dupes] errors.angularjs.org/1.5.7/ngRepeat/dupes?
You may use ng-value="defalutvalue" so your code is something like that
<select ng-model="selectedOption" ng-value="defalutvalue" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main" >
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
<li class="cbp-ntopen">
<h3 class="cbp-nttrigger">{{data.name}}</h3>
<div class="cbp-ntcontent">
From the error that you mentioned, I think you are not giving Angular a way to figure out how to note your object as unique. Use a track by expression in your ng-repeat.
So your ng-repeat would become: ng-repeat="data in myData.profiles track by $index"
See the Tracking and Duplicates section of ngRepeat documentation.
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles track by $index" ng-show="selectedOption == data.category">
I have menu and use ng-repeat for loop to the my category and in this loop i have a link tag and I want to when clicked on this link do something in js file.
But I can't access to the tag a in javascript and add click event to this element.
Here is my ng-repeat code:
<li class="has-children" ng-repeat="category in categories |filter:{ level: 1 } : true" ng-if="$index < 5">
<a class="parent-link">{{category.categoryName}}</a>
<ul class="is-hidden">
<li class="go-back"><a>{{category.categoryName}}</a></li>
<li ng-repeat="submenu in categories |filter:{ parentID: category.categoryID } : true"><a>{{submenu.categoryName}}</a></li>
</ul>
</li>
Here is my js file (this code doesn't fire):
$(".parent-link").on("click", function(e) {
console.log("clicked");
e.prenvetDefault()
});
Use ng-click. It can be used as attribute of element. Example usage:
HTML:
<div ng-click="changeWord()">
{{word}}
</div>
Controller:
$scope.changeWord = function () {
$scope.word = 'I am changed';
}
See http://jsfiddle.net/ax6k3z1e/
Possible reason could be that you Javascript is getting executed before the DOM is ready. You should use ng-click as It's good to build through Angular way when you are using AngularJS in you application.
ng-Repeat have the tendency to bind your iterating object as well. Below is the example for the same.
<div ng-repeat='ele in elements'>
<p ng-click='ShowAlert(ele)'>{{ele.name}}</p>
</div>
Specify below mentioned code in your linked controller.
$scope.ShowAlert=function(element){
alert(element.Name);
}
I have multiple flow-btn elements on my page. There is a list of items that the user can upload single files directly in to (individually) or they can choose to upload multiple files which will automatically populate the list. Everything is inside a flow-init.
A bit like this pseudo-code example:
<div flow-init>
<div flow-btn>Upload multiple images to fill the list</div>
<h3>The list</h3>
<ul>
<li ng-repeat="item in items">
<div flow-btn flow-single-file>Upload an image for this item</div>
<img flow-img="item.flowFile">
</li>
</ul>
</div>
I need to identify which flow-btn was used within the list so that I can display the uploaded image thumbnail at the correct point. Basically I think I want access to the item from a flow event.
Note: The list loop data is defined by other data, so I can't just loop through $flow.files to create my list.
How can I do this?
Should I create a new flow-init instance for each loop item? Overkill?
Edit: Alternatively, perhaps I can open the multiple flow-btn from my controller programmatically rather than having a flow-btn for each item?? In which case I could stash the current item in the controller.
Edit. 08.2015
I have checked this once again under firefox and input element appears to be hidden not inside event.srcElement, but in event.originalTarget. I have updated code and plnkr.
Well, as you probably know ng-flow provides events. To those events you can pass your functions and inject them with $event object, which has reference to specific button you have clicked. In your case you could listen for flow-files-submitted and based on $event.srcElement do appropriate actions like this:
HTML
<div flow-init flow-files-submitted='handleUpload($files, $event, $flow)'>
<div flow-btn>Upload multiple images to fill the list</div>
<h3>The list</h3>
<ul>
<li ng-repeat="item in items">
<div flow-btn flow-single-file>Upload an image for this item</div>
<img flow-img="item.photo" ng-if='item.photo'>
</li>
</ul>
</div>
JS
$scope.handleUpload = function($files, $event, $flow) {
if(($event.srcElement !== undefined)&&($event.srcElement !== null))
var input = angular.element($event.srcElement)
else
var input = angular.element($event.originalTarget)
if (input.scope().item) {
if(input.scope().item.photo) {
input.scope().item.photo.cancel();
}
input.scope().item.photo = $files[0];
} else {
for(var i = 0; i < $files.length; i++) {
$scope.items.push({photo: $files[i]});
}
}
};
Check out this Plunker for solution to your problem