Develop Reference

dropdown is working in desktop but not in mobile

Dropdown element is working fine on desktop view but not on mobile view. Click and hover events are not working. What should I do, so them will work on mobile view. I am a new learner stuck with this problem, I tried to google it but couldn't find any solution.
<div class='dropdown-table'>
<button class='dropbtn dottedOpenOrders'>︙</button>
<div class='dropdown-content'>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-edit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/edit-dropdown.png" /> </span><span>Edit</span></a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-danger btn-close-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/cancel-dropdown.png" /> </span> <span>Cancel </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-play-pause-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/pause-dropdown.png" /> </span> <span>Pause/Resume </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-warning btn-exit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/exit-dropdown.png" /> </span> <span>Force exit </span> </a>
</div>
</div>

How to extract name from a button (jQuery navigation)?

A part of source code on a specific site looks like this:
.
.
.
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.
.
.
How do I grab each data-id value?
I tried
$('.list-group-item').each(function(){
var text = ($(this).text());
console.log(text);
});
But it returns item 1(2), description and Unsubscribe text.
I also tried
$('.btn btn-default btn-xs pull-right listing-sub-remove').each(function(){
var text2 = ($(this).text());
console.log(text2);
});
But this doesn't work at all.
What command should I use to grab data-id values successfully?

You could do it like this:
$(document).ready(function() {
$(".btn.btn-default.btn-xs.pull-right.listing-sub-remove").each(function() {
console.log($(this).data("id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>

Is this what you're looking for?
// We gather ALL elements with '.list-group-item' class
var elements = $(".list-group-item");
// We iterate over each element in the array of elements
$.each(elements, function(index, element) {
// We create a variable that takes the child link anchor [a tag], and grabs the data-id attribute from it
var dataId = $(element).find("a")[0].dataset.id;
// If the variable is not undefined, it will console log the result
if (dataId) { console.log(dataId); };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.

move data view to javascript without click button

I have a view and there is a button in this page. When I click that button I can get a parameter (#say_note.ID). But I want to get this parameter in javascript without click button.
My View :
#foreach (Note say_note in Model)
{
<div class="col-lg-12" data-note-id="#say_note.ID">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">
<a href="/Home/ByNote/#say_note.ID">
#say_note.Tittle
</a>
</h4>
<h6 class="text-right">
<h7>#say_note.Owner.Username</h7><i class="fas fa-user"></i><br />
<h7> #say_note.ModifiedOn.ToString("dd.MM.yyyy")</h7><i class="far fa-clock"></i>
</h6>
<p class="card-text">
#say_note.Text
</p>
</div>
<div class="card-footer">
<p>
<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
<button class="btn btn-sm btn-outline-secondary float-sm-left" type="button" data-liked-button="false" data-note-id="#say_note.ID">
<span class="far fa-star like-star"></span> <span class="like-count"> #say_note.LikeCount</span>
</button>
<div class="text-right dateAndName float-sm-rigth">
<a class="bottomNav" onclick="history.go(-1); return false;" href="#"> Geri </a><br />
</div>
</p>
</div>
</div>
</div>
}
</div>
My Javascript:
$("#collapse_CommentPopup").collapse("toggle")
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + #say_note.ID);
});
collapse_CommentPopup my collapse modal and I fill data this collapse with javascript

I solved my own question , maybe someone can use it other time
MyButton :
<button data-toggle="collapse" id="CommentButton" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
My Javascript:
$(function () {
$("#collapse_CommentPopup").collapse("toggle") //ModelCommentPopup isimli nesne show olduğunda (popup event'i yakaladık)
var NoteId = $("#CommentButton").data("note-id");
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + NoteId); //ShowNoteComments metodunu çalıştır ve dönen partialı popup'ın bodysine yükle
});

how can I use ng-model inside ng-repeat loop in AngularJS?

How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>

I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}

<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>

Delete generated elements from div angularjs

I want to delete the criteria list item on clicking the delete button. Right now only the filter is getting refreshed. The tables are not being deleted. Suggestions to get through this.
HTML
<ul class="list-unstyled">
<li style="display: inline-block" ng-repeat="crtia in newCriteria" >
<table>
<tr>
<td>
<select class="input-sm" ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
</td>
<td>
<input class="input-sm " ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" ng-click="searchy.check()" />
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" ng-click="removeCriteria($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>
</button>
</td>
</tr>
</table>
</li>
</ul>
JS
$scope.removeCriteria=function($index){
$scope.searchy.check();
alert($index);
$scope.newCriteria.splice($index,1);
$scope.newList(); //Refreshes the filter
}

Try this
HTML
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" data-ng-click="removeCriteria(crtia)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
JS:
$scope.removeCriteria = function (sourceToRemove) {
$scope.searchy.check();
var index = $scope.newCriteria.indexOf(sourceToRemove);
$scope.newCriteria.splice(index, 1);
$scope.newList(); //Refreshes the filter
}
Update Plunker