Hi in my controller I am assigning following value
Than in html dropdown I have,
<div n-repeat="a in area">
<select ng-options="" ng-model="area.location" ></select>
<div>
Basically I want to show dropdown and only have one value selected which is area.location.
I tried it with empty ng-options or no ng-options it doesn't work.
Due to the way same field works in other section I cant use span or input to show this value has to show in a dropdown.
Please let me know how I can show just on value from ng-model as selected in dropdown.
Thanks
There are a few issues on your code:
First, if you want the tag to repeat, you should put the ng-repeat directive on the tag.
Second, you shouldn't use both ng-repeat and ng-options, You'll just get a wrong result.
Third, when you use the ng-repeat at this form nh-repeat="a in area", the a is the single item. so write ng-model ="a.location" instead of area.location.
area is the array, which probably doesn't have the property "location"
Hope this is what you need:
<select ng-model="selectedArea" ng-options="a.location for a in area">
</select>
Related
Concatenating the selected options of three dropdown lists using JQuery to then use as a lookup value in a JSON file.
It is concatenating, but it looks like it's returning the values rather than the text of the selected option?
I know that $("#yourdropdownid option:selected").text(); is an option, however the lists are produced by reading a JSON and then placing the outcome in an <Option value= > - will this still work?
FIDDLE
Any suggestions?
$('#bcr').val() will get the value or ID of the dropdown.
You can use $('#bcr option:selected').text() to get the value inside the dropdown ie the text
In my application there is a drop down(combo box) am populating drop down value
using json array object.can anybody tell how to get selected value from drop down in angular js controller
Thanks
I would use ng-options and ng-model. Your HTML will look something like this:
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
reference:
https://docs.angularjs.org/api/ng/directive/ngModel
https://docs.angularjs.org/api/ng/directive/ngOptions
I want to change the content of a selectbox based on a radio button.
I'm using AngularJS. So, my select box looks like this:
<select ng-controller="MyController">
<option ng-repeat="o in array_of_values" value="{{o.id}}">{{o.value}}</option>
</select>
Now, depending on wether my radio button is checked or not, I want a different set of values loaded in the select box.
I don't have much experience with Angular, but I suspect I could dynamically change $scope.array_of_values in MyController. Something similar to this example (official documentation)
I've seen another example, where you can change the content of a div based on a radio button, just using ng-model + ng-show
EDITED: But I have another difficulty: I really have several pairs radio button / select box, as table's rows, and they are dynamically generated. I could use plain jQuery plus a javascript function to get the id of each radio button and just change a specific select box based on the onClick event of the radio button. But I tend to think there is a more elegant way to do this, using AngularJS. Am I right?
Any clues? What approach should I follow?
Many thanks in advance
You should start by reading the doc and pick the right components.
Select angular way: https://docs.angularjs.org/api/ng/directive/ngOptions
Radio: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
$watch the radio models and change the array_of_values values. Prefer use object agains values ({id:0, value:"value0"}).
$scope.radio = {name:"Radio1"};
$scope.$watch('radio', function(newVal, lastVal){
if(newVal.name === 'radio2')
$scope.array_of_values = values2
};
});
I add a task, then click edit, the priority dropdown menu isn't render. I wonder what's is wrong. Take a look my full code here
http://jsfiddle.net/U3pVM/3801/
it appear to be {{task.priorty}}, not rending with ng-model?
Try this in the second drop-down
<select ng-show="editable" ng-model="task.priorty" ng-options="priority.level as priority.level for priority in priority">
</select>
Fiddle
You needed to add the model of the selected task to the edit drop-down list. Also, you had to specify that the value of each item in the edit drop-down is the level property.
In the first drop-down, you are selecting the entire priority object as the value of each drop-down. However, you only assigned the priority.level to task (and not the entire priority object). Hence, in the edit drop-down, the priority.level as... specifies that you are trying to match the level property alone with your model.
You forgot to add ng-Model to your second select (without ngModel your select control won't work).
Example:
<select ng-show="editable" ng-model="selected_priority2" ng-options="priority.level for priority in priority">
<option value="">{{tasks.priorty}}</option>
</select>
Updated your jsFiddle
I am trying to select a certain value in my dropdown via jquery..I tried this..
$("#membershiptype").val(1).selected;
it doesnt work..I am clearly over my head here as I am inexperience in jquery.
To select an option by index, you can do this :
$("#membershiptype").get(0).selectedIndex=1;
Demonstration
To select an option by value (the content of the option), you may use this :
$("#membershiptype").val('B');
Demonstration
You can assign the val() to the option value you want to be selected.
$('#membershiptype').val(valueToBeSelected);