To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?
ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.
Related
I'm trying to set a value of the option field as a JSON object inside another JSON object eg. catalogue inside attribute.catalogue. The problem is that it is saved as a String which looks like a JSON object.
I think this is somehow related to the limitation of the option value field. Can I somehow adjust my code, so that the value is stored as a JSON object and not as a String?
This is the code:
<div class="col-sm-3">
<select ng-model="attribute.catalogue" ng-change="showScope()">
<option data-ng-repeat="catalogue in catalogueObjects"
value="{{catalogue}}">{{catalogue.name}}</option>
</select>
</div>
In general html attribute's can only store string value. In angular world ng-options directive does provide an ability to use assign object when select option selected.
<select ng-model="attribute.catalogue" ng-change="showScope()"
data-ng-options="catalogue as catalogue.name for catalogue in catalogueObjects">
</select>
Reference
https://docs.angularjs.org/api/ng/directive/ngOptions
A merchant has multiple branches.
When selecting a merchant I'm trying to make another dropdown list the data from merchant.branches.
Doing the below does not seem to be resolving the problem:
<label>Merchant:</label>
<select ng-if="merchants" ng-model="merchant" ng-options="merchant.name for merchant in merchants track by merchant.id"></select>
<span ng-if="!merchants">Listing merchants, please wait...</span>
<br />
<label>Branch:</label>
<select ng-if="merchant.branches" ng-model="device.branch" ng-options="branch.name for branch in merchant.branches track by branch.id"></select>
<span ng-if="!merchant.branches">Listing branches, please wait...</span>
<pre>
{{ merchant.branches }}
</pre>
Please note that the data is correct and Merchants return properly with their respective branches.
SOLVED
Using a different method (By calling ng-change on the first dropdown and then populating the second dropdown). However, is it possible to achieve this without writing any controller code?
I have to guess at how your controller works, but you might have luck with this:
<label>Branch:</label>
<select ng-if="merchant.branches"
ng-model="device.branch"
ng-options="branch.name for branch in merchants[merchant.id].branches track by branch.id"></select>
I have a app written in C# .NET using WebApi and AngularJS.
At some points in my aplication I fill up a select tag with options using ENUMS, because since the values are not in the database I don't feel like need to create a service that return the enums because I'm using razor pages so I can use the enums directly.
Everything was working fine until I updated the angular version to 1.4.7, Than this stop working, and I can't downgrade the angular version (for some enterprise reasons).
For example, I have this code
<div class="col-md-3 col-xs-12">
<label for="qualificacaoCobreJunta" class="col-xs-12 control-label">#IsiCTB.Internationalization.Res.Controls.label_cobre_junta<span class="obrigatorio">*</span></label>
<div class="col-xs-12">
<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta"
required>
<option value="" id="cobrejunta-0">#IsiCTB.Internationalization.Res.Controls.label_prompt_selecione</option>
<option id="optCobreJuntaCom" value="#IsiCTB.Entities.Enums.ComSem.Com.ToInt()">#IsiCTB.Entities.Enums.ComSem.Com.GetValueString()</option>
<option id="optCobreJuntaSem" value="#IsiCTB.Entities.Enums.ComSem.Sem.ToInt()">#IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()</option>
<option id="optCobreJuntaAmbos" value="#IsiCTB.Entities.Enums.ComSem.Ambos.ToInt()">#IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()</option>
<option id="optCobreJuntaNA" value="#IsiCTB.Entities.Enums.ComSem.NA.ToInt()">#IsiCTB.Entities.Enums.ComSem.NA.GetValueString()</option>
</select>
<div ng-show="formQualificacaoSubmitted" class="error-form-validation">
<div ng-show="gerenciaQualificacoesSoldador.qualificacaoCobreJunta.$error.required">#IsiCTB.Internationalization.Res.Controls.label_obrigatorio</div>
</div>
</div>
</div>
Code getting data from WebApi.
QualificacaoService.get({ id: idQualificacao }, function (data) {
$scope.qualificacao = data;
});
And that return a JSON object with a bunch of attributes, like that:
{
id: 1,
cobrejunta: 2,
anotherEnumField: 1,
anotherEnumField2: 5,
anotherEnumField3: 2
....
}
If I have like qualificacao.cobrejunta = "2" (string) setting in the model, the select is pointing to right option, but if I have qualificacao.cobrejunta = 2 (integer) than nothing seems to work.
There's anyway to get this working again, or the only (best) solution is crete a service that will request a API, and this API will build the array and than return that for using ng-option?
Thank you guys.
This is discussed here.
All you have to do is to change your select as below
<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta" required
ng-options="entry.value as entry.label for entry in [{value : #IsiCTB.Entities.Enums.ComSem.Com.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Com.GetValueString()'}, {value: #IsiCTB.Entities.Enums.ComSem.Sem.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()'}, {value: #IsiCTB.Entities.Enums.ComSem.Ambos.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()'}, {value:#IsiCTB.Entities.Enums.ComSem.NA.ToInt(), label: '#IsiCTB.Entities.Enums.ComSem.NA.GetValueString()'}]">
</select>
I think Angular behaviour has changed with the version 1.4.8. I had the same problem: I had a list of values into a combo (static values), and I assigned dynamically the value to select throught the controller. It wasn't a problem with version 1.3.8, but it's with 1.4.8 when the selected value remains blank. But I can show the value in the view, and it's correct.
The way to solve this for me was to translate that static values, to an object containing that values, and defining it al the begin of the controller (before assigning the value). It's strange to have to do it, but I didn't find another way to success.
I have ui-select2 dropdown that depends on the selection of a parent. I have a array of options for the first ui-select2, then when something is selected from that dropdown, the next dropdown will appear. The available options for the 2nd dropdown will depend on what is selected in the first dropdown. The ng-repeat directive is iterating over an array of choices. Here is the html and the js code.
HTML:
<select name="application" placeholder="Select a Tenant"
ng-disabled="!sharedObj.tenantApplications ||
sharedObj.tenantApplications.length == null"
class="form-control" id="application"
ng-change="vmOrderItem.vmNameUSI=null" ui-select2
ng-model="vmOrderItem.tenantApplication" title="Select tenant application"
data-style="btn-default" required><option></option>
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter()" value="{{tenantApplication.id}}">{{tenantApplication.name}}
</option>
</select>
JS:
/** Filters the tenant depending on what domain is selected */
$scope.tenantFilter = function(tenantApplication) {
$scope.sharedObj.tenantApplications;
tenantApplication.name;
tenantApplication.id;
return true;
/* return $scope.vmOrderItem.domain.id == tenantApplication.domainId;*/
}
The issue I get is that even if I return true, nothing ever shows up on the dropdown. I did this to test the logic. I don't know why the tenantApplication parameter is always undefined in the function. I used google chrome inspect element to insert a breakpoint and it complains that the argument is undefined. But I don't see why it wouldn't work properly when I return true. I'm a newbie to JavaScript and AngularJS so any help is greatly appreciated. I've worked through all the AngularJS examples and read their docs but I'm still just a beginner.
Think this should be:
<option ng-repeat="tenantApplication in sharedObj.tenantApplications |
filter:tenantFilter" value="{{tenantApplication.id}}">
I'm attempting to create a dynamic drop down list, but after searching for hours I'm still completely stumped as to how to do it. So I am experimenting with variables in a list. This is the code I've started with.
<body>
<form method = "post">
<select id = "State" onchange = "a = this.options[selectedIndex].value;">
<option value = ""> Select a state</option>
<option value = "S3"> Pennsylvania</option>
<option value = "S4"> California</option>
<option value = "I4"> Texas</option>
<option value = "I5"> New York</option>
</select>
</form>
</body>
my question is what can I do with the variable 'a' so that I could create a dynamic drop down list based off it? One thing I had hoped to do was use an if-statement to display a second list. I wanted to remain on the same page too.
Note: I apologize if this seems like a basic question, but I've been scouring websites for answers and all I've figured out was that I can't send javascript variables to php, otherwise I'd have gotten this done forever ago
try this way
<select id="appamt" name="appamt">
<? while($amt=mysql_fetch_array($amount)){ ?>
<option value="<?=$amt['amount']?>"><?=$amt['amount']?></option>
<? } ?></select>
When your page detects the onchange event, what you need to do is either have all the combinations of options you want readily available but hidden on the page e.g. $('#sub-option1).hide(); and when the value is selected use $('#sub-option1).show();
Secondly you can have a ajax request that returns a JSON value of key=>value pairs, then use these key value pairs to dynamically build another dropdown using jquery .each() function.
Loop through your json values and add them to a previously hidden selector and then display it.
Hope this helps but if not email me and I will skype you through it.
Jim C