I wrote the next code, but when I click on the trash icon, the ng-click of this element is thrown, but the ng-click of the div container is thrown too, I don't need the second one, just the first call, could some body help me.
<div ng-if="order.selectedProducts === null || order.selectedProducts.length > 0"
class="cartCol hoverable" ng-repeat="product in order.selectedProducts track by $index"
ng-click="showProductDetailed(product)">
<div class="cartHeading" ng-bind="product.name"></div>
<a href="" class="trashIcon" ng-click="removeSelectedProduct(product);">
<i class="fa fa-trash"></i>
</a>
<div class="cartSizeInfo">
<span class="fltLft">{{product.productTypeName}}</span>
<span class="fltRht">Bs. {{product.price}}</span>
</div>
</div>
I had to put $event.stopPropagation(); after the first call.
Related
<div
[ngClass]="{ 'template-row': !isExpandable, 'folder-row': isExpandable }"
class="label-with-icons clickable"
(click)="expanderClicked()"
(click)="itemSelected()"
>
<i *ngIf="isExpandable" [ngClass]="getArrowIconClass()"></i><i [ngClass]="getIconClass()"></i>
<span *ngIf="id" class="name ">{{ name }}</span>
<span *ngIf="!id" class="name">{{ name }}</span>
<i *ngIf="!isExpandable" class="io-icon-trash clickable" id="delete" (click)="deleteTemplate()"></i>
</div>
I want the entire div to be clickable but not the icon with id= delete. I want to have a different click event on that
I dont use jquery , i work with TS
You can stop the event to propagate up in the DOM tree with event.stopPropagation() :
(click)="deleteTemplate($event)"></i>
deleteTemplate(e: Event) {
e.stopPropagation(); // <----event won't travel up
}
Problem:
I am writing a tracking electron app where the user data is stored on a local JSON file. Essentially i have the cards (user info from json) loaded to display via html. My next step is to run the python backend, problem i am having is I currently can't load the correct array value, only the last one is currently loading into a variable that im trying to pass to python. Since im using forEach i shouldn't have to count or do i still need to do that?
What I expect to happen:
I want an alert to pop up with the current user.handle value. What happens now is it only pops up the last value in the array regardless of which card i press. How can i make each button press trigger the corresponding handle value?
When i test and swap out onclick="myFunction11()" with onclick=alert('${user.handle}') it prints the correct handle value. So i can assume i am just overwriting var city every time and left with the last one in the array. Any advice on how to correctly have myFunction11 pull the corresponding handle value i would love. thanks
Question:
How can i correctly have myFunction11 pull the correct handle value from the array? or is there a better way to achieve this?
Code:
$(document).ready(function() {
users.forEach(function(user) {
$('.team').append(`<div class="card">
<figure>
<img src="${user.image}" />
<figcaption>
<h4>${user.name}</h4>
<h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links">
<i class="fa fa-pencil"></i>
<i class="fa fa-truck"></i>
<i class="fa fa-trash-o"></i>
</div>
<div class="task">
<div>
</div>
</div>
<div class="bottom-links">
<i class="fa fa-pencil"></i> EDIT
<i class="fa fa-truck"></i> TRACK
</div>
</div>
<script>
function myFunction11() {
var city = '${user.handle}';
alert(city);
}
</script>
`);
});
Adding duplicates of the same function is indeed bad practice. Your way when you have three users you will have defined function myFunction11 three times. And in fact (as you guessed) you end up with the function only having the last value of city.
Instead, this should be better:
$(document).ready(function() {
$('.team').append(`<script>
function myFunction11(city) {
alert(city);
}
</script>`);
users.forEach(function(user) {
$('.team').append(`
...
<i class="fa fa-pencil"></i>
...`);
});
define function outside loop and pass user index as parameter
function myFunction11(index) {
var city = users[index].handle;
alert(city);
}
$(document).ready(function() {
users.forEach(function(user,i) {
$('.team').append(`<div class="card">
<figure>
<img src="${user.image}" />
<figcaption>
<h4>${user.name}</h4>
<h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links">
<i class="fa fa-pencil"></i>
<i class="fa fa-truck"></i>
<i class="fa fa-trash-o"></i>
</div>
<div class="task">
<div>
</div>
</div>
<div class="bottom-links">
<i class="fa fa-pencil"></i> EDIT
<i class="fa fa-truck"></i> TRACK
</div>
</div>`);
});
});
I have a collapsible accordion using ng-repeat to render its options. On the right there is a downward facing glyphicon. This glyphicon should become upward facing once the job is clicked and expanded.
Update: Using Amine's response, the clicked header gets a glyphicon-down as it should be. But when collapsed and clicked outside, the glyphicon stays downward as the index is set and actually needs to become upward facing again when collapsed. How can I set $index to undefined again when the item is clicked again?
My code:
<div class="col span_2_of_3">
<div ng-repeat="item in jobs">
<accordion>
<accordion-group ng-click="state.selected = $index">
<accordion-heading>
<h2>
"{{item.title}}"
<i class="pull-right glyphicon "
ng-class="{'glyphicon-chevron-up': $index == state.selected,
'glyphicon-chevron-down': $index != state.selected }"
ng-click="state.selected = $index"
></i>
</h2>
</accordion-heading>
{{item.description}}
</accordion-group>
</accordion>
</div>
</div>
In my controller I have:
$scope.state = { selected: undefined };
You're not removing the glyphicon-chevron-down class when you click on the element. You end up with an element that has both classes ; whatever CSS rule comes last will be applied.
Try this :
<i class="pull-right glyphicon "
ng-class="{'glyphicon-chevron-up': $index == state.selected,
'glyphicon-chevron-down': $index != state.selected }"></i>
Here is a fiddle showing a solution (note that I have removed the ng-click binding on the icon as that's already handled by the accordion-group).
I have in my index.html a div which initially must be hidden:
<div class="autocomplete" ng-show="div_show" ng-controller="SearchController">
And I need when I click on my Menu on the search link,the div to be shown,basically
ng-show="true"
So on my link I defined something like that:
<a class="list-group-item" ng-click="show()"><i class="fa fa-search fa-fw"></i> Search</a>
And in my controller the function :
$scope.div_show = false;
$scope.show =function(){
$scope.div_show = true;
console.log($scope.div_show);
alert($scope.div_show);
}
When I click on the link I have the alert value set to 'true'but the div is still hidden,
Any suggestions? Thank you!!!
To toggle the ng-show element, just assign the following directive on the Menu button:
ng-click="div_show = !div_show"
All this does is toggles the value of div_show between true and false.
Here's a plunker for a full demo.
Try something like this :
<a href="#" class="list-group-item" ng-click="div_show = true">
<i class="fa fa-search fa-fw"></i> Search
</a>
This will make sure the page is not getting loaded again and i will set the div_show to be true, only if it is in the scope.
I'm developing a small notifications-like module, where the user can see his 5 latest activities that are logged in the DB (MSSQL). The values that I need are all there, but for some reason knockout binding is not working. Here are code snippets:
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>
For now, I only want to display random text for every item that is in the observableArray.
ViewModel is the following:
var layoutLogsModel = {
notification: ko.observableArray()
};
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data);
});
}
And every time I call this function, the list is empty (IMAGE)
(the function is called on click, and absolutely no errors are shown in the console).
What is it that I am doing wrong?
EDIT:
The thing was, I forgot to execute ko.applyBindings for that viewModel. Then, I changed the HTML to look like this:
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-user" style="color: green;"></i>
<span data-bind="text: $data"></span>
</a>
</div>
</ul>
Aslo, I modified the get function slightly, like this:
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data.Notification);
});
}
(changed data to data.Notification based on the MVC model property that contains the array)
After all that, the data was available immediately.
try removing the layoutLogsModel from the foreach, you are already using it with the binding "with", so eveything in that div will be part of layoutLogsModel.
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>