How to get selected record in AngularJS? - javascript

For e.g.
<select class="form-control" id="group_id" name="group_id"
ng-model="form.group_id" ng-options="match_group.id as match_group.name for match_group in match_groups"
required="" ng-change="getGroupWiseMatches()">
....some code
</select>
But match_group instance will have id, name and xyz columns.
Now on the select of match_group, I also want value of xyz column.
How can we get it?
Any help will be appreciated.

Your ng-options expression has the following format: "select as label for value in array".
The select-part is the result that is bound to your ng-model. So if you change your code to the following:
<select class="form-control" id="group_id" name="group_id"
ng-model="form.group"
ng-options="match_group as match_group.name for match_group in match_groups"
required="" ng-change="getGroupWiseMatches()">
....some code
</select>
your variable form.group would contain the entire group object, instead of just the id.
Check this plunker to see it in action

I found the work around for this,
My html will be as it is,
<select class="form-control" id="group_id" name="group_id"
ng-model="form.group_id" ng-options="match_group.id as match_group.name for match_group in match_groups"
required="" ng-change="getGroupWiseMatches()">
....some code
</select>
And in js I am fetching selected entry as,
var found_record = $scope.match_groups.find(obj => obj.id === selected_id);
$scope.form.xyz = found_record.xyz;

Related

Populate Input field value based on selected dropdown

I am stuck trying to simplify the user inputs by automatically populating the input value based on the above selection box in a model.
Context:
I am trying to populate the account payments by using standard items.
In my DB I have the following:
item | value
item 1 | Value 1
item 2 | Value 2
item 3 | value 3
I would have the following in my modal code
<div class="modal-body">
<label class="label-control">Membership Number:</label>
<div class="input-group">
<input type = "text" class = "form-control" name = "membership" value="">
</div>
<label class="label-control">Rank:</label>
<div class="input-group">
<select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" data-size="6">
#foreach ($payments as $p)
<option value ={{$p->item}}>{{$p->item}}</option>
#endforeach
</select>
</div>
<label class="label-control">Amount</label>
<div class="input-group">
<input type="text" class="form-control" name = "amount" value="xxxx">
</div>
I would like to populate the value="xxxx" based is what selected in the item drop down.
So if Item 3 is selected from the drop down, the value 3 is populated in the value field.
I understand that I require an onchange javascript, but I am a little lost.
Saving this to the DB will not be an issue, just the javascript to update the value field is where I get stuck
Give an ID "selectBox" to selectbox And "textField" to the text box. By using Jquery then you can populate its value.
$(document).on('change', 'select#selectBox', function(){
$('#textField').val();
});
Also make small change in your loop, add quotes " " to value.
#foreach ($payments as $p)
<option value ="{{$p->item}}">{{$p->item}}</option>
#endforeach

Angularjs select with ng-repeat, on select bind ng-model with object

After my get request i get
$scope.variables = response.data;
my select is:
<select name="varSelect" id="varSelect" ng-model="wid.adapter">
<option ng-repeat="variable in variables" value="{{variable.id}}">{{variable.name}}</option>
</select>
after that i have two input text fields
<input type="text" ng-model="wid.url" />
<input type="text" ng-model="wid.name" />
On button click i want to post wid
$http.post(some_url, $scope.wid).then(function (response) {
console.log(response);
});
My problem is that i dont get the object variable in wid.adapter. I gog the id.
How to modify my code to get the variable instead of id?
use the variable as the value not the id
and use the ng-option attribute on the select to bind it properly
<select name="varSelect" id="varSelect" ng-model="wid.adapter"
ng-options="variable.name for variable in variables">
</select>

HTML/Javascript Input type="text" - How to shows text different from value?

Actually i have a datalist:
<datalist id='modelsList'>
<option value='1'>Dummy1</option>
<option value='2'>Dummy2</option>
</datalist>
This is used in an input:
<input type='text' name='dummy' autocomplete='off' list='modelsList' value=''/>
If i start typing Dummy2 and then i click on the dropdown list result the textbox shows 2. I need to find a way to have 2 as value but Dummy2 as text.
I cannot use a drop-down list (select tag)
Here, my solution as per you want check it out...
You can use input event for achieving such functionality,
HTML
<input type='text' id='dummy' list='modelsList'/>
<datalist id='modelsList'>
<option value='1'>Dummy1</option>
<option value='2'>Dummy2</option>
</datalist>
Jquery
$("#dummy").on('input', function () {
var val = this.value;
if($('#modelsList option').filter(function(){
return this.value === val;
}).length) {
var option = $('#modelsList').find('option[value="' + val + '"]');
$(this).val(option.text());
}
});
also check DEMO of the above code.
The format for a text input in HTML5 is as follows:
<input type="text" name="name" value="Value" placeholder="Placeholder Text">
As a user types in their content, the value changes.
You may be getting confused with textarea:
<textarea name="name">Value</textarea>
If you want to put a textarea tag, you have to know that the value attribute is invalid, but perhaps if you want to use it instead of input, and the format is similar as you put:
<textarea name="name">contentHere</textarea>

Creating dropdown at runtime and bind dropdown values after that - not working ngOptions

I am generating dropdown at runtime using AngularJs. I also want to bind corresponding options with it which will be generated based on dropdown type being created.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control"
ng-options="item.configValue for item in configOptions(attrib.configType)" />
</div>
My controller has following method.
$scope.configOptions = function (type){
return SmartCache.get(type); //SmartCache is my cacheFactory
}
EDIT:
Here is my data when parameter type = 'Status'
[{"$id":"1","people":[],"configId":"STAT001","configValue":"Active","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Active","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHM=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"2","people":[],"configId":"STAT002","configValue":"Suspended","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Suspended","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHQ=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"3","people":[],"configId":"STAT003","configValue":"Terminated","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Terminated","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHU=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"4","people":[],"configId":"STAT004","configValue":"Deleted","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Deleted","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHY=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]}]
I am able to achieve my task using code below but not using ngOptions.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control">
<option ng-repeat="c in configOptions(attrib.configType)" value="{{c.configId}}">
{{c.configValue}}</option>
</div>
</div>
Try this jsFiddle
I can't see the rest of your code. Here is a snippet of how to create the dropdown:
<select data-ng-options="e.description for e in configOptions" data-ng-model="selectedOption" />
Demo:http://plnkr.co/edit/YcuqZ1gs4iDAAgfLrZPO?p=preview
Probably you are trying this
Use as
<select class="form-control"
ng-options="item.configId as item.configValue for item in configOptions(attrib.configType)" />
configId adds as option value and configValue as display value.

Submit and Generate Dynamic PHP Form

I have a form with text boxes and drop down menus. One of the drop down menus is Dependant on the value of another, e.g. InventoryUsage is dependent on the value in InventoryID.
So far I have done the entire site using PHP since I do not know JavaScript, though I found a JavaScript function that can get the value entered in InventoryID, but I cannot use that value in the PHP since PHP is server-side.
What I need to do is change the second dropdown options depending on that of the first dropdown. Then submit the data as I would with a normal form.
Edit:
I used ob_start and included the tpl page and sent all the variables to the page which were pulled from the database prior. All the variables have the same index meaning that InventoryID['0']=ID3456 corresponds to InventoryUsage['0']=60. Therefore when InventoryID is ID3456 i would like to display the Number located at InventoryUsage['0']. I hope this adds some context to the problem.
The index is determined by the php variable $i in my code snippet. The $i would be changed to match the index of the InventoryID field. Say the value of InventoryUsage is 20 then I want to display numbers 1 to 20.
Snippet of code below:
<label>TypeOfSurgery</label> <input type="text" name="TypeOfSurgery" size="35" value="" />
<label>CauseOfSurgery</label> <input type="text" name="CauseOfSurgery" size="35" value="" />
<label>AnaesthesiaUsage</label> <input type="text" name="AnaesthesiaUsage" size="35" value="" />
<label>SurgeryOutcome </label> <input type="text" name="SurgeryOutcome" size="35" value="" />
<label>RecoveryTime</label> <input type="text" name="RecoveryTime" size="35" value="" />
<label>Stages </label> <input type="text" name="Stages" size="35" value="" />
<label>EmployeeName </label> <p>
<select name="EmployeeName">
<option value=""></option>
<?php
for($i=0;!empty($EmployeeName[$i]);$i++)
echo '<option value="">'.$EmployeeName[$i].'</option>';
?>
</select><p>
<label>Cost</label> <input type="text" name="Cost" size="35" value="" />
<label>InventoryID</label> <p>
<select name="InventoryID">
<option value=""></option>
<?php
for($i=0;!empty($InventoryID[$i]);$i++)
echo '<option value="">'.$InventoryID[$i].'</option>';
?>
</select><p>
<label>InventoryUsage </label> <p>
<select name="InventoryUsage">
<option value=""></option>
<script type="text/javascript">
var model= document.getElementById('InventoryUsage');
</script>
<?php
//if inventory in
for($i=0;!empty($InventoryUsage[$i]);$i++)
echo '<option value="">'.$InventoryUsage[$i].'</option>';
?>
</select><p>
In order to populate the InventoryUsage dropdown you need to use JavaScript.
You can use the onChange event for the dropdown InventoryID then fetch the corresponding values via Ajax.
$('#InventoryID').change(function () {
var value =$(this).val(); // selected InventoryID option
//get InventoryUsage values
$.ajax({
method: "POST",
url: "myfile.php",
data: { data: value },
success: function(data){
// Populate new dropdown $("#InventoryUsage")
// this is an example without knowing what is the returned data
var Newoptions = [];
for (var i = 0; i < data.length; i++) {
Newoptions.push('<option value="',
data[i].someValue, '">',
data[i].someName, '</option>');
}
$("#InventoryUsage").html(Newoptions .join(''));
}
});
});
});
then in your PHP file you need to handle the $_POST['data'] , then query your database and return the drop-down options( Arrays ) that will be populated above...
edit :
If you are sure that this index matches the Inventory_Usage and that the InventoryUsage dropdown has previously been populated then
you could try to select the InventoryUsage option using the index of the InventoryID dropdown on change and load events...
try adding this function to you select :
<select name="InventoryID" onChange="set_inventory_usage()"></select>
then add this script to your page's HEAD section..
<head>
<script type="text/javascript">
function set_inventory_usage(){
// Change to getElementById if it is the ID not the name
var Inventory_ID = document.getElementsByName('InventoryID')[0];
var Inventory_Usage = document.getElementsByName('InventoryUsage')[0];
// returns the index of the selected option in the InventoryID dropdown
var InventorySelected = Inventory_ID.selectedIndex ;
// Sets the Usage dropdown to the same index as the Inventory selected option
Inventory_Usage.selectedIndex = InventorySelected ;
}
window.onload = set_inventory_usage ;
</script>
</head>
Option 1: Without JavaScript, the best option is to add an onchange to your first dropdwon list, and when a value is selected submit the form. Since the form is not complete, and only the dropdown value and elements before that are passed, you can set a condition to query the database, get values based on first drop down and reload the form with those options. IThere is nothing wrong with this solution if done properly but to be honest I perfer to do such things with Ajax, hence option 2 below.
Option 2: Learn some JavaScript and use Ajax (Use caution when using other people's scripts in your system)
Edit: Perhaps instead of wring Ajax code from scratch, use jQuery where most things are already done for you. Learning jQuery is very useful if you are going to do web development

Categories