I want to display button based on status id. If status id is 2 the ADD will be showed up to the user.
I'm using axios get function.
below is my code
$("#detailsContent").html(response.data.result.map((a) => {
let statusData= '';
if(a.status.id === '2'){
statusData+=`<button class="btn btn-danger" onclick="add()">ADD</button>`;
}
return`
<div class="nk-block">
<div class="info">
<ul class="meta">
<li class="id"><span> Type:</span> <strong>${a.status.type}</strong></li>
<li class="date"><span>Submitted:</span> <strong>${a.status.date}</strong></li>
</ul>
<div class="info">
<span class="badge badge-primary">${a.status.name}</span>
</div>
<div class="status">
${statusData}
</div>
</div>
</div>
`;
}
if the status.id == 2
I want it to show the button ADD add the highlighted area
button area
With the my current code its not working even if the status id is 2 the button ADD still now showed up. How do I fix my code in order to display the button ?
I make silly mistake for this it should be like this if(a.status.id === 2)
and not like this if(a.status.id === '2')
Related
I have the above image which has Add Person button, on click of Add person, Person 1 row gets created and so on. On the right end of each row, I have a share icon, on click of an icon, I wanted to open a ul element. The problem is the number of popups that gets displayed depends on the number of rows. If 5 rows are added, then 5 popups are displayed. Ideally, I need only one popup to be displayed, for Person 4 row it should be the popup with 33( basically the popup the is present for that particular row). I tried to add *ngIf = i> 1 condition, but the popup with 00 is only displayed every time which is not correct because the popup position will always be in parallel to Person 1 position.
<div>
<div *ngFor="let person of persons; let i = index">
<div>
<div class="userIcon">
<div>
<img class="person-img" src="assets/images/person.png" alt="My Profile">
</div>
<div>
<input id="form3" class="form-control" type="text">
<label for="form3" class="">{{person.name}}</label>
</div>
</div>
</div>
<div>
<div>
<input id="form5" class="form-control" #enteramount type="text">
<a class='dropdown-trigger sharebtn' href='#' data-target='dropdown{{i}}' (click)="shareIconClicked($event, i, enteramount)"></a>
{{i}}
<ul id='dropdown{{i}}' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
<li> {{i}}
Copy Message
</li>
<li>Whatsapp</li>
<li>Email</li>
</ul>
</div>
</div>
</div>
</div>
Below image represents the single popup after adding ngIf = 'isFirst'. I have clicked the Person 4 share icon. If I click the Person 3 share or Person 5 share icon, the popup is always positioned on the first row.
Just add check for first using *ngFor like this -
<div *ngFor="let person of persons; first as isFirst">
....
<ul id='dropdown{{i}}' *ngIf='first' [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
...</ul>
</div>
For more in details refer official docs -
https://angular.io/api/common/NgForOf
You should try angular Mat-menu feature like this.
<div *ngFor="let person of persons; first as isFirst">
.... code
<button mat-button [matMenuTriggerFor]="menu">Share</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="sharteWithFacebook(person)">Facebook</button>
<button mat-menu-item (click)="shareWithWhatapp(person)">Whatsapp</button>
</mat-menu>
</div>
In Angular 2 I have this component.html:
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text" *ngIf="iscalled" />
<div id="container">
<button class="btn btn-warning editsection (click)="editAction()">Edit</button>
</div>
</li>
with this component.ts:
editAction(){ this.iscalled = true; }
iscalled is, by default, set to false in my component.
Basically, for each something of somethings I produce, along with my list is an input field that is assigned to it, and a button that runs editAction(). The button is only there if the user clicks on the editAction() button.
Now, as is, clicking on the editAction() button will enable all input fields in my list. I would like to restrict this to the exact li element that it is meant for.
I don't know if Angular 2 has a specific action for this, or if this is a plain javascript solution.
NOTE: with this setup don't set default value of iscalled to false
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text"
*ngIf="something.iscalled" /> //<<<===changed
<div id="container">
<button class="btn btn-warning
editsection
(click)="editAction(something)"> //<<<===changed
Edit
</button>
</div>
</li>
editAction(something){ something.iscalled = true; }
if you want to toggle it then you can do following,
editAction(something){ something.iscalled != something.iscalled; }
What I'm trying to do is have #navbar-image-id2games be toggled when the active url is index.html. I attempted to do this with javascript like so, but it doesn't seem to be working.
HTML:
<div class="navbar-item" id="navbar-item-ID2Games">
<a href="index.html" id="index-url">
<div class="navbar-image" id="navbar-image-unhovered">
</div>
<div class="navbar-image" id="navbar-image-id2games">
</div>
<br>
<div class="navbar-text">
ID2 Games
</div>
</a>
</div>
Javascript:
$('#index-url').active(function() {
$('#navbar-image-id2games').toggle();
$('#navbar-image-unhovered').hide();
});
JSFiddle: https://jsfiddle.net/zxsmuaae/
You can check whether or not the user is at index.html by doing:
if (window.location.href.match(/index\.html/)) {
// toggle
}
You can check the url with an if statement, and then set the visibility to hidden if it is on a certain page.
var navimg = document.getElementById("navbar-image-id2games");
if(window.location.href === "http://example/index.html"){
navimg.style.visibility = "hidden";
}
If you want it to be reverse where it is hidden only when it is not on index.html, you can replace === with !==.
I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>
I have an issue with a partial that is rendered almost instantly for the first time navigating to that page, however if navigate away from that page and sometime later i come back it is rendered noticeably slow. It contains an ng-repeat on a list of about 140 items.
e.g: home (initialize) --> spells (instant) --> home --> spells (slow)
GitHub Repository
Why does this happen and how do i fix it?
Steps i've already taken to try and improve:
Add bind-once in the repeater
Use etags in my API so i don't get back a full list of the items i already have each time i load a partial.
Added track by to ng-repeat.
Code
<div ng-repeat="color in ::colors">
<div>
<span data-target="#{{$index + 'col'}}">
<header>
<label>{{color.name}}</label>
</header>
</span>
</div>
<ul id="{{$index + 'col'}}">
<li ng-repeat="spell in ::spells track by spell.name"
ng-if="spell.color.name === color.name"
ng-dblclick="addToCharacter(spell, 'spell')"
on-long-press="addToCharacter(spell, 'spell')">
<div>
<label ng-hide="isSpell(spell)">Ability</label>
<label ng-show="isSpell(spell)">{{spell.cost}} mana</label>
</div>
<div data-target="#{{$index + 'sp'}}">
<a>{{spell.name}}</a>
</div>
<div id="{{$index + 'sp'}}">
{{spell.description}}
</div>
</li>
</ul>
</div>
IsSpell()
$rootScope.isSpell = function (spell) {
return spell.type != null && spell.cost != null;
};
I have implement a little mechanism to only load the items when they are needed, so the page loads instantaneous and when the user clicks on a category (which is animated) it loads the items it needs. This all works very smoothly and i am quite happy with it.
See the first div (colors) and the ng-if on the li
<div ng-repeat="color in ::colors" ng-init="loadItems = false" ng-click="loadItems = true">
<div>
<span data-target="#{{$index + 'col'}}">
<header>
<label>{{color.name}}</label>
</header>
</span>
</div>
<ul id="{{$index + 'col'}}">
<li ng-repeat="spell in ::spells track by spell.name"
ng-if="(spell.color.name === color.name) && (loadItems = true)"
ng-dblclick="addToCharacter(spell, 'spell')"
on-long-press="addToCharacter(spell, 'spell')">
<div>
<label ng-hide="isSpell(spell)">Ability</label>
<label ng-show="isSpell(spell)">{{spell.cost}} mana</label>
</div>
<div data-target="#{{$index + 'sp'}}">
<a>{{spell.name}}</a>
</div>
<div id="{{$index + 'sp'}}">
{{spell.description}}
</div>
</li>
</ul>
</div>