We Keep Coding

Handlebars and node problem getting dynamic list id

I created a for using handlebars to get the values ​​from my bank, the search is coming correctly but when trying to select one of the city options it returns me undefined
I believe it is something in this style, but could not apply in my code
Handlebars & Jquery: Dynamically generated ids
$(document).on("click", "[data-trigger='save']", function (evt) {var commentID = $(this).prev().data("comment");});
{{#each cidade}}
<div class="card mt-4">
<label for="bott"><button class="btn" name="cid" id="cid" data-trigger="save">
<div class="card-body">
<small>{{estado}} - {{ativo}} </small>
<input type="hidden" data-comment ="{{#index}}" name="idcid" id="idcid" value="{{_id}}">
</div>
</button>
</label>
</div>
{{else}}
<h4 value="0">Nenhuma cidade registrada</h4>
{{/each}}
<input type="text" id="cidade" name="cidade" class="form-control" disabled>
The question is to take the id value and the name of the selected button and put the related name in the input text
If you need to add information let me know because I'm new here and I'm using google translator for this conversation
thanks in advance

Dynamically add items from input with vuejs

In my vuejs project I have a form section to add facilities and appliances to a house. There is an input field to input a facility and button to add it to a list, but I am a bit unsure how to do this.
My HTML:
<div class="input-wrapper flex align-end">
<div class="input-wrap">
<label for="facility">Add facility like pooltable or swimmingpool</label>
<input type="text" v-model="facility" id="facility" class="bordered border-green" />
</div>
<div class="input-wrap">
<button class="button button-main button-green-light add-button" data-button-type="add" #click.prevent="addFacilities">Add</button>
</div>
</div>
The goal is to make it add the item to a list when clicking "Add" and then empty the input field, so I end up with something like this
<ul>
<li>Pool table<li>
<li>Swimming Pool<li>
<li>Fussball table</li>
</ul>
<input type="hidden" name="facilities" value="pool table, swimmingpool, fussball table" />

You need to use v-for for this case.
in list template part
<ul>
<li v-for="item in items" :key="item">{{item}}</li>
</ul>
in form template part
// .. form items
<input type="text" v-model="input">
<button type="button" #click="addToItems">Add</button>
in vue component js part
data: {
input: '',
items: [],
},
methods: {
addToItems() {
if (!this.input) {
// input value is empty
return;
}
// add item to reactive array items
this.items.push(this.input);
// clear the input
this.input = '';
}
}
See example here: https://codepen.io/Mgorunuch/pen/LYYGmQp

AngularJS: Is there a way to create two-way binding on a label element so that I can dynamically attach it to an object?

This problem has been frustrating me for the last couple days now so, here I am. I'll try to be as clear as possible.
I have an object to retrieve from the database. This object is used to create dropdown menus. It has two properties on it: A section property, which contains one string. The other property is called value, which contains all the possible options that the user can select in the dropdown. I use two nested ng-repeats in my HTML to create the dropdowns.
I am trying to send out to the database a formData object that has 2 properties in it: the name of the dropdown menu, and the value that the user selected. Appending the value selected from the dropdown menu is easy thanks to two way data binding that I set on the select element. However, I CANNOT figure out how to grab the value from the label element inside my controller so that I can attach it to my formData object. As far as I know, ng-model does not work on a label element. Here is the HTML, which hopefully will make it a bit more clear:
<form class="form-horizontal" ng-controller="PreferenceCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
</option>
</select>
</div>
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save
</button>
</div>
</div>
</form>
Because the <select> class can have an ng-model attached to it, I can easily capture that value in my controller. I cannot do the same with the label. If anyone can help me out I will forever be your best friend. Thank you!

In answer to your question title "Is there a way to create a two-way binding on a label element", no, that isn't possible.
But if I understand correctly what you're trying to do, it sounds like you want to save data to the database based on information contained in both the <label> and it's associated <select>. If that's true, then I'd recommend using an ng-change function in your <select> like this:
<select class="form-control" ng-model="formData.settings[$index].value" ng-click="dropdownItemClicked(name, formData.settings[$index].value)">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
</option>
</select>
In your controller, create a function to handle this ng-click event:
$scope.dropdownItemClicked = function(name, value) {
console.log(name, value);
// save name/value to database
}
The key is to pass in the exact data you want to save to the database into your dropdownItemClicked() function.

Could you just put the value inside the label?
<label ng-bind="name">{{formData.settings[$index].value}}</label>

There is no way to read from the label. It is the one way binding after all, right. I would do something like this.
var app = angular.module('MyApp', []);
app.controller("MyCtrl", function($scope){
$scope.formData = {
settings:[]
};
$scope.configs = {
'Label1': [{ value: 11 }, { value: 12 }],
'Label2': [{ value: 21 }, { value: 22 }]
};
$scope.change = function(name, idx) {
$scope.formData.settings[idx].name = name;
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-cloak="" ng-app="MyApp">
<form class="form-horizontal" ng-controller="MyCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value" ng-change="change(name, $index)">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
{{item.name}}
</option>
</select>
</div>
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save
</button>
</div>
</div>
<div>
{{formData.settings}}
</div>
</form>
</div>

Simple Product Filter Using Javascript and Jquery

I am creating a simple product filter using JQUERY. The result are showing for the check box values but not for Select Box Values. I would like to use both features. The results are showing according to the DIV class "xxx" value applied on each product. You can find a live example at: [Demo]: http://jsfiddle.net/shamsmaxcom/rc5ctjez/? "click here for live demo" And the source code is pasted below. Please help. Thanks
<div id="solution_finder">
<h1 style="font-size:27px; margin-top:45px; margin-left:40px; font-weight:normal;"> Product Filter </h1>
<ul id="filters" style="list-style:none; margin-top:25px; line-height:30px; ">
<li>
<input type="checkbox" value="all" checked="checked" id="all" style="display:none;">
</li>
<li>
<input type="checkbox" value="3xzoom" id="3xzoom">
<label for="filter-category">3x video zoom</label>
</li>
<li>
<input type="checkbox" value="touch" id="touch">
<label for="filter-category">Touch ID</label>
</li>
<li>
<input type="checkbox" value="burstmode" id="burstmode">
<label for="filter-category">Burst mode</label>
</li>
<li>
<input type="checkbox" value="antireflective" id="antireflective">
<label for="filter-category">Antireflective coating</label>
</li>
</ul>
<div style="margin-left:43px;">
<select id="genre" onChange="return selectOption();">
<option value="All">All</option>
<option value="with-retina">With Retina Display</option>
<option value="without-retina">Without Retina Display</option>
</select>
</div>
<div style="width:840px; height:148px; clear:both; margin-top:40px; margin-left:43px;">
<div id="so_air2" class="category 3xzoom touch burstmode antireflective with-retina all" ><a href="#" ><h1>iPad Air 2</h1> </a></div>
<div id="so_air" class="category 3xzoom with-retina all" ><a href="#" ><h1>iPad Air</h1></a></div>
<div id="so_mini3" class="category 3xzoom touch with-retina all" ><a href="#" ><h1>iPad mini 3</h1></a></div>
<div id="so_mini2" class="category 3xzoom with-retina all" ><a href="#" > <h1>iPad mini 2</h1> </a></div>
<div id="so_mjni" class="category all" ><a href="#" > <h1>iPad mini</h1> </a></div>
</div>
<script type="text/javascript">
$('input').change (function() {
var selector = $('input:checkbox').map(function(){
return this.checked ? '.' + this.id : '';
}).get().join('');
var all = $('div[class^="category"]');
if(selector.length)
all.hide().filter(selector).show()
else all.hide();
});
</script>
</div>

I've changed your HTML and javascript code a bit to make it work.
This is the running JSFiddle.
The code that does the trick of using values of both checkboxes and dropdown is
$(':input').change(function(evt){
var filter = $(':input:checked,select').map(function(index, el) {
return "." + el.value;
}).toArray().join("");
$(".category").hide().filter(filter).show();
});
Mind that I've used :input selector instead of input to tell jQuery to also include select element when defining change event handler.
What change event handler does afterwards is
It generates a CSS selector filter:
Selects all checked checkbox inputs and dropdowns
Maps each resulting element to its CSS-class-compliant value (adding dot in front)
Changes jQuery set to a normal array and
Joins all strings together
Shows matching results by:
Hides all result elements
Filters them according to previously generated filter and
Shows matching ones
This filter uses AND predicate logic. If you wanted to use OR, then the only difference would be when joining filter classes:
....join(", ");

How can I get the text of a label using Jquery in this particular case ?

For example in the code below , I would like get the text Salutation of a the label tag with class description in the code below , tried to select the class but it's not working .. how can I select the text of the label uniquely according to the id of the label ?
<tr id="salutation_id" class="edit_tr" border="0">
<td class="edit_td">
<div id="salutation_id" class="unique_ids database_key">
<span id="first_salutation_id">
<h1 class="ui-widget-header">
<label id="label_salutation_id" class="description">Salutation</label>
</h1>
</span>
<input id="first_input_salutation_id" class="editbox" type="text" value="Salutation" style="display: none;">
<div class="ui-widget-content">
<ol class="ui-droppable ui-sortable" style="">
<li class="placeholder">Add "Salutation" here</li>
</ol>
</div>
</div>
</td>
</tr>

If you want to get it with ID, this is the way: $('#label_salutation_id').text().
You mention "with class description", then you can use this: $('label.description').text(); if you just have one <label> element with that class.
Demo here

Even better:
var label = document.getElementById('label_salutation_id'),
text = label.textContent || label.innerText;

If you meant to select more than this one salutation, you can use:
jQuery('label.description')
to select all label elements with the class description.