I want to display the country in response from dropdown. I tried a lot and I could not find any solution.
I am using a JavaScript link "http://iamrohit.in/lab/js/location.js".
I am getting the selected country name from JSON response but can't compare it with the dropdown list and display the response value.
My HTML :
<select name="country" class="form-control1 drop countries" required ng-model="model.country" placeholder="select" id="countryId sel1"><option value="" disabled selected>Select</option>
My controller :
$scope.model.country = "India"; //from json response
I saw this "<option value="? string:India ?"></option>" when I inspect the country field in the profile page.
If you want to view what option is selected, the you will indeed put your ng-model in your tag.
But if I understand correctly, you want to create different options according to your JSON data.
I suggest using:
<select>
<div ng-repeat= "x in model.country">
<option> {{x.Name}} </option> //I suggest dividing your JSON information
</div>
</select>
I hope this answers your questions. Let me know if you need more precise information!
Related
I'm actually using VueJS and encountered a little problem
I have a selector, that needs to memorize an ID to be sent in an axios request later. In the "selected" var, we need to keep only the name of the "type" for user friendly reasons. So, I need to get the ID selected by the user without displaying it. Actually, the code looks like this.
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option v-for="onetype in playertype" class="form-control" id="lg_type" name="lg_type" v-bind:key="onetype.idType">
{{onetype.idType}}-{{ onetype.name }}
</option>
</select>
Selected is the actual name of the selected type. Since it's vue, when I click on another Type from my selector, it changes it automatically
onetype contains two things : A name, and an idType
playertype contains an array of all types
As we can see in the code, i display things like this "idType - name", but I only want to display "name" (so just erase onetype.idType), but I need to get the id to send it elswhere (I can't use onetype.idType to get the id to my axios method)
I don't know if it's clear enough, but I need to send the onetype.idType to an axios method, but I can't use it this way.
Thanks you in advance, this is driving me crazy and I feel I've missed something obvious ><
Use value attribute and you will get it in v-model instead of displayed option:
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option
v-for="onetype in playertype"
:value="onetype.idType"
class="form-control"
id="lg_type"
name="lg_type"
v-bind:key="onetype.idType"
>{{ onetype.idType }}-{{ onetype.name }}</option>
</select>
I'm trying to fetch the data into my dropdown when I edit an id or data, right now the value that is being fetched is null or none of the options that I have in my dropdown. Kindly help on how can I fetch the data using jquery / javascript.
So my final output should be, when I choose an ID, the value of the dropdown should be displayed
here is my html code below, I have the dropdown input
<select id="position" name="position" class="form-control">
<option>Select Role</option>
<option value="Admin" data-id="1">Admin</option>
<option value="Staff" data-id="2">Staff</option>
</select>
here is my script code below,which I use to choose an id to edit or view
variable I declare
var position = $('input[name=position]');
my ajax code
success: function(data){
$('input[name=position]').val(data.position); // here is the value from the dropdown
}
You aren't selecting the <select> element, your selector should be
$('select[name=position]').val(data.position);
Your original selector was looking for an <input> tag, while you might consider a <select> as an input control the selectors operate on the tag name which is select
I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.
I have two Web API's that I am calling. Each value in the first api Type has an ID that needs to be used to filter the second api which is Category. The JSON is below:
// Types
[{"ID":1,"Text":"Hardware","Description":"Hardware"},
{"ID":2,"Text":"Software,"Description":"Software"}"}];
// Categories
[{"ID":1,"TypeID":1,"ParentID":0,"Name":"Printing"},
{"ID":2,"TypeID":1,"ParentID":1,"Name":"Toner"}]
First of all, you have to store selectedTypeID that will be used to filter another array, and than you can call Angular $filter in your second array.
Sintax:
$filter('filter')(array, expression, comparator)
e.g:
$filter('filter')($scope.categories, {TypeID: $scope.selectedTypeID}, comparator)
I think you're asking this: *How can I dynamically populate a select input based on the selection in another select input?
I think you can go two ways. If there is not much total data (like with Categories), you could use a filter on the second set of data. https://docs.angularjs.org/api/ng/filter/filter#!
You can do this in the HTML or in the controller!
<!-- HTML Page -->
<select>
<option ng-repeat="value in values | filter..." value=value>
</select>
// controller.js
values = ($filter('filter')(result.Values, {Id: $routeParams.Id}));
If there is lots of data to filter, consider delaying your call to the Category API until a Type is selected.
Without seeing the controller/HTML and whatnot, it's hard to give a specific answer, but I think this will get you moving in the right direction.
$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
$scope.sates = CustomerService.getCountryState($scope.customer.Country);
$scope.cities =[];
};
<select ng-model="customer.State"
ng-options="x.Id as x.state for x in sates"
ng-change = "getStateCities()"
class="form-control"
ng-required="true"
id="state">
<option value="">-- Choose State --</option>
</select>
<select ng-model="customer.City"
ng-options="x.Id as x.city for x in cities"
class="form-control"
ng-required="true"
id="city">
<option value="">-- Choose City --</option>
</select>
Check complete code with demo
I am trying to set the selected tab so when a user tries to edit his or her profile the data is preset to the current data. It creates a list just doesnt create the selected. Can someone tell me where I am wrong?
<b>Education:</b> <select class="form-control"
ng-model="currentUser.education">
<option ng-repeat="education in educations" value = "{{education.educationId}}"
ng-selected ="{{education.educationName == currentUser.educationName}}">{{education.educationName}}</option>
</select>