I want to get the value of selected option on button click.
Problem is that I have several groups of button and select. So, I have to use sibling somehow, but I cant figure out how to.....
<div class="form-group" ng-repeat="category in categories">
<div id="kkal-type" class="form-options">
<select name="{{cats[$index]}}" id="{{cats[$index]}}">
<option value="0" >--Не выбрано--</option>
<option ng-repeat="food in category.foods" ng-show="food.available" value="{{food.cost}}">{{food.name+" - "+food.cost+"тг"}}</option>
</select>
<input type="button" value="ВЫБРАТЬ" class="choose-btn orange filled" ng-click="update(this)"/ >
</div>
$scope.update = function(btn) {
console.log( $(btn).siblings('select').val());
};
But this doesnt work.
Who knows how to get this working?
Thank you in advance!
just use ng-model on select and pass that value to ng-click function
<select name="{{cats[$index]}}" id="{{cats[$index]}}" ng-model="selectedItem">
<input type="button" value="ВЫБРАТЬ" class="choose-btn orange filled" ng-click="update(selectedItem)"/ >
$scope.update = function(selectedItem) {
console.log( selectedItem);
};
on the side note, use ng-options instead of ng-repeat
<select name="{{cats[$index]}}" id="{{cats[$index]}}" ng-options="food.cost as food.name for food in category.foods" ng-model="selectedItem">
<option value="0" >--Не выбрано--</option>
</select
Just navigate to the parent: $.parent() and then search downwards: $.find("select").
You can also use the $.closest() method, this will look in the tree and find the closest element that suits your selector, which is what you need:
$scope.update = function(btn) {
console.log( $(btn).closest('select').val());
};
Related
I am using the bootstrap combobox with search which is working fine when populated with static options as follows:
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control" style="display: none;">
<option value="" selected="selected">Type Planet name...</option>
<option value="0">Mercury</option>
<option value="1">Earth</option>
<option value="2">Venus</option>
<option value="3">Mars</option>
<option value="4">Jupiter</option>
</select>
</div>
</form>
I want to load the options dynamically from an array. i tried ng-options and ng-repeat but the values are not coming inside the combo box. I will prefer using javascript.
Tried option:
<select class="combobox input-large form-control" style="display: none;"
ng-model="PlanetData.selectedPlanet">
option value="" selected="selected">Type for Planet...</option>
<option ng-repeat="planet in PlanetData.availablePlanets" value=" {{planet.id}}">{{planet.planetName}}</option>
THis creates the combobox with the text "Type for channel", but the planetdata does not appear in the the combobox options rather it appears below it. I want to know how to bind the two so that the data comes in the combobox.
The problem is that when the combobox function is called the ng-repeat or the ngOptions didn't rendered the options yet.
One quick way to fix this is call the $('.combobox').combobox() inside a $timeout callback.
$scope.items = [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}];
$timeout(() =>
$('.combobox').combobox(), 0);
See the plunker with this example: https://plnkr.co/edit/j25lasvpHxmMNUjl7EjE?p=preview
I tested with ngRepeat and ngOptions.
var planet = ['Mercury','Mercury1'];
$.each(planet, function(index, value){
$('.combobox').append('<option value="'+index+'">'+value+'</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label>Select options</label>
<select class="combobox input-large form-control">
</select>
</div>
</form>
The issue was because of the ng-options or ng-repeat not getting rendered when the combobox was appearing. Refer to the answer from Rafael, it has all the necessary details. I used the timeout as he suggested and it worked like a charm.
$timeout(() =>
$('.combobox').combobox(), 100);
I am trying to recreate a real problem, so this example may seem strange, but it will certainly solve my problem.
I would appreciate it if you can help me.
I have a button, which clicks on it, it generates 3 dynamic dropdowns (a variable called $ scope.dropdown is fed, with the list of animals that contains the $ scope.aAnimals array, there are currently 3 elements, but in the future Can be "n" elements).
After this, I want each dropdown to have a different value, for example, that the first dropdown has the first animal, the second dropdown the second, the third dropdown the next.
I have tried many things, but I have not been able to achieve it.
<div ng-repeat='item in dropdown'>
<select class="form-control animal" ng-model='MyAnimals' id='animal{{$index}}' name='animal{{$index}}'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
</div>
<button ng-click='add()' >generate</button>
$scope.obj = {}
$scope.aAnimals=
[
{ "animal": "cat"}, //first dropdown
{ "animal": "dog"}, //second dropdown
{ "animal": "parrot"} //third dropdown
]
$scope.add=function(){
$scope.dropdown=[];
for(var i in $scope.aAnimals){
$scope.dropdown.push({ "animal": $scope.aAnimals[i].animal })
//$('.animal')[i].value=$scope.aAnimals[i].animal;
}
}
this must be the result..
{ "animal": "cat"}, //first dropdown
{ "animal": "dog"}, //second dropdown
{ "animal": "parrot"} //third dropdown
All animals continue to appear in all dropdowns. The important thing is to get the result of the image.
http://plnkr.co/edit/JF1PBblo6VGKdeWvoqTz?p=preview
You can use like -
<div ng-repeat="item in dropdown">
<select ng-model="item.animal" ng-options="opt.animal as opt.animal for opt in aAnimals">
<option value="">Select an animal</option>
</select>
</div>
You could use:
<div ng-repeat='item in dropdown'>
<select class="form-control animal" ng-model='item' id='animal{{$index}}' name='animal{{$index}}' ng-options="opt as opt.animal for opt in aAnimals" >
<option value="">Select an animal</option>
</select>
Hope this will help:
<div ng-repeat='item in aAnimals'>
<select ng-model="item.animal" ng-options="opt.animal as opt.animal for opt in dropdownw"></select>
</div>
I have a list made with ng-repeat with options. I'm trying to make it so that when I click an option, the value of the selection will be passed to an object.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-model="vakselect">{{ t.Name }}</option>
</select>
$scope.user = {
vak: klas.vakselect,
};
I have small experience with Angular, so I'm not sure how to make it work correctly.
Edit:
I have adjusted my code and user.vak does seem to catch the selectvak field, but now passes it as an array. How do I make it so it's a string in $scope.user? So whenever I log user, I will see a string of vak and then an array of students.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak" ng-options="t.Name as t.Name for t in klas" ng-click="getJSON1()">
$scope.user = {
vak: '',
// klas: klasselect,
student: [$scope.student] -1
};
TLJ and Arnaud are correct.
But answering your initial question, in the select tag, instead of ng-model="vakselect" just use ng-model="user.vak".
Then, when the value of the select changes, the value of user.vak will change automatically.
real code is this : (and nothing to do inside the controller.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak">
<option value="1" ng-repeat="t in klas">{{ t.Name }}</option>
</select>
And you should use ng-options instead of ng-repeat to create your options
https://docs.angularjs.org/api/ng/directive/ngOptions
This will add t.name to an array when you click the option. Take a look at the controller function and the ng-click in the partial.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-click="add(t.Name)" ng-model="vakselect">{{ t.Name }}</option>
</select>
var string_option;
$scope.add = function(t) {
string_option = t;
console.log(string_option )
}
I am new to angularjs. The project is getting transitioned from jquery to angular. Initially, it was a nightmare with all the new terms and scarry topics. I am getting used to it now and actually enjoying working on angular.
I am stuck at one part and i hope someone could help me or suggest me here. Please refer to the jsfiddle.
http://jsfiddle.net/ash12/kk1s3a1d/12/
Here is th HTML code....
<div ng-controller="ListController"><br>
File:
Name:
City:<br/>
<input type='file' ng-model="activeItem.name">
<select name="singleSelect" ng-model="activeItem.content">
<option value="" disabled="" selected="" style="display:none;">Select Name</option>
<option>Rob</option>
<option>Dilan</option>
</select>
<select name="singleSelect1" ng-model="activeItem.content1">
<option value="" disabled="" selected="" style="display:none;">Select City</option>
<option>China</option>
<option>Korea</option>
<option>United States</option>
</select>
<button ng-click="addItem()">+</button><br>
<ul>
<li ng-repeat="item in items"> <a>{{item.name}}</a><a>{{item.content}}</a>
<a>{{item.content1}}</a>
</li>
</ul>
</div>
Here is the controller function...
function ListController($scope) {
$scope.items = [{
}];
$scope.activeItem = {
name: '',
content: '',
content1:''
}
$scope.addItem = function () {
$scope.items.push($scope.activeItem);
$scope.activeItem = {} /* reset active item*/
}
}
Here, if i select the file name, name and city and then press on add button. It shows the list below. The problem is that it doesnot show the file which we have selected.
Can someone please tell me what to do in this case ? Also, i need the click button to be active only for 6 times. after adding the 6th time, it should not let me add any further. can someone suggest here ??
You need to do that by handling the onchange event of the file input
<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)">
and In your controller
$scope.fileNameChanged = function(el){
$scope.activeItem.name = el.files[0].name
}
To disable your add button, in your additem check for the length of your items array and disable the button using ng-disabled
See the updated fiddle here : http://jsfiddle.net/kk1s3a1d/15/
here is the working jsfiddle of your problem
http://jsfiddle.net/adiioo7/fA968/
you need to use onchange as mentioned below as ng-model and ng-change doesnt work with input type="file"
<input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(event)" />
I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.
HTML:
<form action='quickLook.py' method = 'post'>
First DropDown Menu
Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option id='Top' value = 'Top' >Top
<option id='Bottom' value = 'Bottom' >Bottom
</select>
Second DropDown Menu
<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option id='Interferogram' value = 'Interferogram'>Interferogram
<option id='SNR' value = 'SNR'>SNR
<option id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>
<input type='submit' value= 'Query Images'>
</form>
I'd like to do something like this is JQuery:
$("#Dual").click(function() {
$("#target").append("#Diff_Band");
$("#target").remove("#Interferogram");
$("#target").remove("#SNR");
});
$("#Top").click(function() {
$("#target").append("#Interferogram");
$("#target").append("#SNR");
$("#Diff_Band").remove();
});
I want to append or remove the already written html.
What is the best way to do this?
Thank you for your time!
This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/