I have a table that has some inputs and angular models.
<td>
<select class="form-control" id="">
<option ng-model="mfrNo" ng-repeat="manufacturer in manufacturers" value="mfrNo">{{manufacturer.SUPP_NAME}} [{{manufacturer.SUPP_NO}}]</option>
</select>
</td>
<td>
<input type="text" ng-model="newCon" class="form-control" name="new_contract_number" value="" maxlength="500"/>
</td>
<button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="reassignContract()">Reassign</button>
In my controller I want to retrieve the values that are selected/inputted.
$scope.reassignContract = function () {
console.log($scope.newCon);
console.log($scope.mfrNo);
};
The first model newCon passes the text input fine. But the 2nd, mfrNo outputs undefined/null.
Why is this model/object not passing? What am I doing wrong and how do I fix it?
ngModel should go on the <select> not the <option>. You should also consider using ngOptions.
So:
<td>
<!-- ngModel should go here -->
<select ng-model="mfrNo" class="form-control" id="">
<!-- Instead of here -->
<option ng-repeat="manufacturer in manufacturers" value="mfrNo">{{manufacturer.SUPP_NAME}} [{{manufacturer.SUPP_NO}}]</option>
</select>
</td>
Additionally, you are setting the value of your only <option> to "mfrNo". I don't know if that is intentional or not, but that means that the value of $scope.mfrNo will be "mfrNo". I think you mean to set it to some other value from the $scope. Use {{some_scope_var}} interpolation.
Related
I have page with multiple drop down menus for employees to select a sales package, these drop down menus are completely identical.
Now when a user selects a sales package say packageA, it prefills a field on the page with the default amount for that package say $100. In the next dropdown packageA is available for selection again. In this next dropdown if a user selects PackageB it prefills the amount with the previous dropdowns value of $100, which is not the correct package price? Basically the money value autofill is only working with the first dropdown selection box on the page. Whatever is selected in the first dropdown changes every other packages money field value on the page?
I understand that by getting the element by ID is not efficient in the case here, yet getting by className does not work at all.
This HTML dropdown select box is repeated a few times on the page.
<!-- this is the dropdown -->
<select id="package-dropdown" class="selectpicker pkg-class">
<option value="">Select</option>
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
<option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}.
</option>
</select>
<!-- where the monetary value gets prefilled -->
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
// JS on change function
$(document).on('change','#package-dropdown', function(e) {
let package = document.getElementById("package-dropdown");
// This is where the price gets prefilled based off of the package selected
$(".display-package-amount").val(package.options[package.selectedIndex].getAttribute('data-value'));
});
Im struggling pretty bad on how to make these actually independent from each other to where each select box truly has nothing to do with the previous/next one. Any tips would be greatly appreciated!
You can't repeat ID in a page so use classes instead.
To get the associated input , traverse to a common parent with closest() then find() what you need within that parent
$(document).on('change', '.selectpicker', function() {
$(this).closest('.row').find('.display-package-amount').val(this.value)
})
.row {
padding: 1em;
border: 2px solid #ccc;
margin: 1em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<select class="selectpicker pkg-class">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<hr/>
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
</div>
<div class="row">
<select class="selectpicker pkg-class">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<hr/>
<div class="col-sm-5">
<input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>
</div>
I am trying to submit form using angular, form is successfully submitted. Issue is after form submit, drop down shows as a invalid state. How to remove it.
<form class="form-inline" name="form" #invoiceheaderform="ngForm" novalidate (ngSubmit)="invoiceheaderform.form.valid && fileNameList();">
<label for="bank" class="lb-adj">Banks</label>
<select class="form-control fix-dropdown" required [ngClass]="{'is-invalid':invoiceheaderform.submitted && orgname.invalid}" #orgname="ngModel" [(ngModel)]="orgNameModel.orgName" name="orgName">
<option value="">--Select--</option>
<option *ngFor="let bank of orgNameModel | async">{{bank}}</option>
</select>
<button type="submit" [disabled]="disableRunButton" class="btn btn-primary mb-2 expad">Search</button>
</form>
try this, after your form is submitted successfully, change your variable to undefined
this.orgNameModel.orgName = undefined;
latest angular forms with reset() is not working as expected.
EDIT
your using async for options may be that is effecting the functionality.Try to remove async and provide an array to the options
<select class="form-control fix-dropdown" required [ngClass]="{'is-invalid':invoiceheaderform.submitted && orgname.invalid}" #orgname="ngModel" [(ngModel)]="orgNameModel.orgName" name="orgName">
<option value="">--Select--</option>
<option *ngFor="let bank of orgNameModel">{{bank}}</option>
</select>
component.ts
orgNameModel:any = [];
//assign the list of banks to orgNameModel
Modify your first <option> tag like this -
<option value="undefined" disabled="true">--Select--</option>
I have this html:
<tr id="Estuches_1">
<td>
<div class="group">
<input name="VariableDataList[0].VariableDataForLevel[0].ProductionOrderId" id="VariableDataList_0__VariableDataForLevel_0__ProductionOrderId" >
<input name="VariableDataList[0].VariableDataForLevel[0].AggregationLevelConfigurationId" id="VariableDataList_0__VariableDataForLevel_0__AggregationLevelConfigurationId">
<select name="VariableDataList[0].VariableDataForLevel[0].VariableDataId" disabled="disabled" id="VariableDataList_0__VariableDataForLevel_0__VariableDataId">
<option value="00">Serial Shipping Container Code(SSCC-18)</option>
<option value="01" selected="">Global Trade Item Number</option>
<option value="10">Batch or lot number</option>
<option value="11">Production date(YYMMDD)</option>
<option value="17">Expiration date(YYMMDD)</option>
<option value="21">Serial number</option>
</select>
</div>
</td>
<td>
<div class="group">
<input name="VariableDataList[0].VariableDataForLevel[0].Value" disabled="disabled" id="VariableDataList_0__VariableDataForLevel_0__Value">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="VariableDataList[0].VariableDataForLevel[0].Value"></span>
</div>
</td>
</tr>
In Javascript, I have a var named clone that create with the above html.
I want to remove the attribute disabled in all of the elements in the html (one in the select, and another one in the input text).
I have tried this:
var clone = $($.parseHTML(html));
clone.removeAttribute("disabled");
But it doesn't remove any of them. Maybe, because it is trying to remove the disabled attribute in the tr.
How can I remove the disabled attribute in all of the elements?
The id and the name of the elements will change.
You need to target disabled element using .find() and then use .removeAttr() method
clone
.find('[disabled]') //Target all disabled descendants
.removeAttr('disabled') //Remove disabled
I am facing some issue in assigning id to two elements present in a single column. One element is dropdown and other is a text element. Actually I achieved this in first scenario but i am facing some issues in second scenario. Please help me guys..
Scenario 1:
<td>
<select name="fmeaEntityForm[0].subSystem.id" id="subSystem0" onchange="getsubSystemFunction(this)">
<option value="-1">
<spring:message code="label.fmea.select.subSystem" />
</option>
<c:forEach items="${subSystemList}" var="ss">
<option value="${ss.id}">${ss.subSystem}</option>
</c:forEach>
<option value="0">
<spring:message code="label.fmea.select.other" /></option>
</select>
<input type="text" name="fmeaEntityForm[0].subSystem.subSystem" id="subSystemText0" placeholder="Enter Sub-system if selected other"/>
</td>
In scenario one i can easily access first element by : table.rows[rowCount].cells[cellNumber].childNodes[0] and second element by table.rows[rowCount].cells[cellNumber].lastChild .
Scenario 2: I need to align this dropdown and text box so i used two classes to align both of the elements parallel. Now both elements are aligned properly but I am not able to access both these elements
<td>
<div class="element1">
<select name="fmeaEntityForm[0].subSystem.id" id="subSystem0" onchange="getsubSystemFunction(this)">
<option value="-1">
<spring:message code="label.fmea.select.subSystem" />
</option>
<c:forEach items="${subSystemList}" var="ss">
<option value="${ss.id}">${ss.subSystem}</option>
</c:forEach>
<option value="0">
<spring:message code="label.fmea.select.other" />
</option>
</select>
</div>
<div class="element2">
<input type="text" name="fmeaEntityForm[0].subSystem.subSystem" id="subSystemText0" placeholder="Enter Sub-system if selected other"/>
</div>
</td>
css
.element1
{
display:in-line;
float:left;
}
.element2
{
margin-left:5px;
display:in-line;
float:left;
}
in "scenario 2" use..
table.rows[rowCount].cells[cellNumber].childNodes[0].childNodes[0] to get the select element, and
table.rows[rowCount].cells[cellNumber].lastChild.childNodes[0] to get the input element
If I have a bunch of table rows and with select tags in them how would I get the selected value?
If the variable "selected_ingr_action" is the same for every row then when I select an item they all change instead of just the one.
I know I'm missing something.
{{#Ingredients}}
<tr>
<td class="ingr-bid-col"></td>
<td>
<div class="row">
<div class="col-xs-12">
<p class="ingr-name">{{Name}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
{{VendorName}}<br />
<b>pack:</b><span>{{Pack}}</span>
</div>
<div class="col-xs-6" style="padding-bottom:5px;">
<div class="caption">
<b>unit price</b><br />
<span>{{UnitPrice}}</span>
</div>
<div class="caption">
<b>case price</b><br />
<span>{{CasePrice}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<select class="form-control" value="{{selected_ingr_action}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
</div>
</div>
</td>
</tr>
{{/}}
I think perhaps you might be asking a much simpler question about why the rows are sharing the value. If this is the case, the short answer is to use a restricted reference (notice the .):
<select class="form-control" value="{{.selected_ingr_action}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
This causes the selected_ingr_action to be bound to the list item, not the root of the ractive instance.
You can access the result on each item with a wilcard observer:
r.observe('list.*.selected_ingr_action', function(n, o, k, i){
console.log('list index', i, 'changed from', o, 'to', n);
});
Check it out here.
The behavior of defaulting to root, rather than current context, is under consideration to be changed to resolve to the current context.
One option would be to have a separate map of selected values, and use two-way binding to update that map (rather than a single selected_ingr_action property, or a selected_ingr_action property belonging to each item in the list). You can see an example of this approach here - the details are different but the principle is the same.
{{#Ingredients :i}} <!-- note the index reference -->
...
<select class="form-control" value="{{selected_ingr_actions[i]}}">
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
There are to ways to solve this.
First, bind the value of the select into data.
I.e. turn this string:
<select class="form-control" value="selected_ingr_action">
into this:
<select class="form-control" value="{{selected_ingr_action}}">
Assuming that your data structure is something like this:
var Ingredients = [
{
Name: String,
VendorName: String,
UnitPrice: Number,
CasePrice: Number,
selected_ingr_action: String
},
/* other entries */
];
As a second thought, maybe you don't want to store action type inside your data.
I beleive that better approach would be to use so-called Proxy Events with custom arguments and Method Calls.
Here, I add key into your template and when you change your select value, corresponding event handler are called with the index of your row.
Like this:
{{#each Ingredients: key}} <!-- <<< note that key -->
<!-- skip -->
<div class="row">
<div class="col-xs-12">
<select class="form-control" on-change="changeAction(this, key)" value="{{this.selected_ingr_action}}">
<!-- note this too ^^^^^^^^^^^^^^^^^^^^^^ -->
<option value="-1" selected disabled>Action</option>
<option value="0">Rename</option>
<option value="1">Edit Unit Price</option>
<option value="2">Archive</option>
</select>
</div>
</div>
{{/each}}
Note, into your Ractive component you can introduce method changeAction, which will receive current row (with corresponding Name, VendorName etc. properties) and it's key. Like this:
var ractive = new Ractive({
/* skip */
changeAction: function (ingridient, key) {
// do something with that ingridient
}
/* skip */
});