We Keep Coding

How to show only one ul at a time in angular using ngFor

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>

AngularJS & jQuery - How to find the ID of a child div on a Click event for its parent?

I have code in HTML like:
<div id="edit" ng-click="editFunction($scope)">
<span id="1">
click1
</span>
<span id="2">
click2
</span>
<span id="3">
click3
</span>
<span id="4">
click4
</span>
....
</div>
In controller.js:
myDIV.controller('control',function($scope){
$scope.editFunction($event){
alert($event.target.id);
}
});
When a user clicks on the div tag, he should click on any of the span tags. Using the code we are able to get the div id.
However, I need to know which span is clicked. Meaning, the ID of that span.

By sending $index, you get the number of the element in the current repeat.
So instead of trying to send an event, and then understand from that what span was clicked, just use the tools that angular gives you out of the box.
HTML
<div id="edit">
<span ng-repeat="click in clicks" ng-click="editFunction($index)">
{{ click }}
</span>
</div>
And then in your controller:
myDIV.controller('control',function($scope){
$scope.clicks = [1, 2, 3, 4]; // Fill the array with real data.
$scope.editFunction(index){
alert(index);
}
});

U can use like this
<div id="edit" ng-click="editFunction($event)">
element.target.attributes.id.value

Setting div IDs to dynamic IDs using AngularJS

I am attempting to use Bootstrap accordion to allow a section of text to be expanded upon when a button is clicked. The data is being pulled from a JS file (Angular), however, I cannot seem to figure how how to set the div ID according to the JS file.
HTML:
<li ng-repeat="i in items | searchFor:searchString">
<img ng-src="{{i.image}}" />
<p>{{i.title}}</p>
<button type="button" class="btn btn-desc btn-lg pull-left" data-toggle="collapse" data-target="{{i.id}}">Expand Description/Output</button>
<div id="{{i.id}}" class="collapse">
<p>{{i.desc}}</p>
</div>
</li>
</ul>
Here is the JS:
$scope.items = [
{
id: '1',
url: 'http://google.com',
title: 'Google',
image: 'http://google.com/image.png',
desc: 'Information about Google'
},
{
id: '2',
url: 'http://duckduckgo.com',
title: 'Duck Duck Go',
image: 'http://duckduckgo.com/image.png'
desc: 'Information about Duck Duck Go'
},
I can display properly each entry for url, image, title, but the same application of the {{id}} or {{i.id}} does not seem to work in relation to data-target and div id. I have looked at other Stack items, but cannot seem to work back from them.

firstly:
In your list item you want searchFor to be filter
i.e.
<li ng-repeat="i in items | searchFor:searchString">
should be
<li ng-repeat="i in items | filter:searchText">
secondly:
You can't set an id to an integer, why not try using:
<img ng-src="{{i.image}}" />
This way you have a string which still has your id value. Although your scope sets the int values to string by default, the HTML will render the id as a int not a string, therefore you want to add text into your statement and that way it's more definitive and you avoid the problem of "why isn't my id working?"

Try setting $index of the repeater as the id
<button type="button" class="btn btn-desc btn-lg pull-left" data-toggle="collapse" data-target="{{$index}}">Expand Description/Output</button>
<div id="{{$index}}" class="collapse">

Having issue to apply second div based CSS to clicked item in first Div

I am very new to angular.Need some assistance with examples as well.
I have two div's . One is created with ng-repeat and have used ng-click to get the clicked item. I have another div below that which has CSS like
style="width:100px;
float:left;
margin-top:-30px;
margin-left:-100px;">
<img src="../../../path to image" in it.
Now I want to apply the below Css div to the ng-clicked item. What is the best way to that? If necessary please provide examples. My code :
<div ng-repeat="p in package ">
<div class="col-md-3 pack-align-lr cursor-poi ticket-top space-buy-pack active-pack " ng-click="testing(p)" >
<span class="pack">{{p}}</span><span class="spaces-font">Spaces</span>
</div>
<div style="width:100px;float:left;margin-top:-30px;margin-left:-100px;"><img src="../../../path to image" class="eventclass"/>
</div>
</div>
Thanks in advance

From my understanding, you want modify the style of a sibling element when you click on the first div.
If that's the case, I suggest you "pack" your css rules in a class, let's say .selected-package.
The next steps would be to store the selected state in a variable (when you ng-click) and use the ng-class directive to toggle the selected-package css class upon the second div.
To wrap it up, here's a simple demo:
angular
.module('fancyApp', [])
.controller('fancyController', function($scope) {
$scope.packages = [
{name:'package 1'},
{name:'package 2'},
{name: 'package 3'}
];
});
.selected-package {
color: red;
}
[ng-click] {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="fancyApp">
<div ng-controller="fancyController">
<h1>My pacakges:</h1>
<ul>
<li ng-repeat="p in packages">
<div ng-click="p.selected = !p.selected">first div: {{p.name}}</div>
<div ng-class="{'selected-package':p.selected}">second div (is red when you click on the first one)</div>
</li>
</ul>
</div>
</div>

ng-repeat inside UL (which is inside a P) is not working

UPDATE: It seems Angular.js doesn't like the <ul> inside a <p>. So, as helpful commenters said, replacing the <p> with a <div> solves the problem.
Sorry if this may be a newbie question on Angular.js but I just can't seem to find the error in this code. Consider the following HTML:
<div ng-app ng-controller="BlocksCtrl">
<div ng-repeat="block in blocks">
<div id="{{block.id}}" class="{{block.classes}}">
<div>
<h1>{{block.title}}, {{block.dates}}
<br/>
<small>
<a href="{{block.place.link}}" target="_blank">
{{block.place.title}}</a>
({{block.place.city_country}})
</small>
</h1>
</div>
<div>
<div>
<p><i class="{{block.icon_classes}}"></i></p>
</div>
<div>
<p>
{{block.description.text}}
</p>
<p ng-repeat="item in block.description.items">
<b>{{item.title}}</b>: {{item.points.length}} - {{item.points[2].text}}
<ul class="fa-ul">
<li>
<i class="fa-li fa fa-check"></i>{{item.points[2].text}}
</li>
<li ng-repeat="point in item.points">
<i class="fa-li fa fa-check"></i>{{point.text}}
</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
This is the Javascript bit:
function BlocksCtrl($scope) {
$scope.blocks = [
{
id: 'my-id',
classes: 'class1 class2',
title: 'This is the title',
dates: '2007 / 2011',
place: {
link: 'http://www.example.com/',
title: 'This is the place',
city_country: 'City, Country'
},
icon_classes: 'fa fa-terminal fa-5x',
description: {
text: 'description test',
items: [
{
title: 'Title test',
points: [
{text: 'item test 1'},
{text: 'item test 2'},
{text: 'item test 3'},
{text: 'item test 4'}
]
}
]
}
}
];
}
This will display the following output (you can check a working example on JSFiddle
http://jsfiddle.net/uskL6/):
This is the title, 2007 / 2011
This is the place (City, Country)
description test
Title test: 4 - item test 3
Now can someone tell me how is it that the "{{item.points.length}} - {{item.points[2].text}}" bit works fine but the "{{item.points[2].text}}" and the ng-repeat inside the UL don't?
Thanks a bunch

You were using <ol> tag inside <p> tag. According to Html documentation
List elements (in particular, ol and ul elements) cannot be children of p elements.
So change <p ng-repeat=""> to <div ng-repeat=""> or <span ng-repeat="">
See this question in stack overflow Should ol/ul be inside <p> or outside?

At first I thought it was simple...
Then it drove me crazy...
The solution: Change the <p ng-repeat="..."> to <div ng-repeat="...">. Then it works; why, I do not know...