Dropdowns not bound to ng-model in Angular - javascript

Something very basic I am missing but I am not able to figure out . I have three fields in a view , two of them are dropdowns.
<div class="form-group row">
<label for="GroupName" class="col-sm-4 form-control-label">Group Name : </label>
<div class="col-sm-8">
<input ng-model="referenceEdit.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type : </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceEdit.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceEdit.groupTypes track by groupType.id" ng-model="referenceEdit.groupType"></select>
</div>
</div>
<div class="form-group row">
<label for="GroupAssignmentMethod" class="col-sm-4 form-control-label">Group Assignment Method : </label>
<div class="col-sm-8">
<select name="selGroupAssignmentMethod" id="selGroupAssignmentMethod" class="form-control" ng-options="assignmentMethod.id for assignmentMethod in referenceEdit.assignmentMethods track by assignmentMethod.value" ng-model="referenceEdit.assignmentMethod"></select>
</div>
</div>
Now in controller , I am getting the results for these drop downs in this way :
var row_details = GroupMembershipReferenceServices.getReferenceDataRow();
referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.GROUP_TYPE).success(function (result) {
$scope.referenceEdit.groupTypes = result;
$scope.referenceEdit.groupype = row_details.grp_typ;
}).error(function (result) {
alert("Unable to retrieve dropdown values");
});
referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.GROUP_ASSIGNMENT_METHOD).success(function (result) {
$scope.referenceEdit.assignmentMethods = result;
$scope.referenceEdit.assignmentMethod = row_details.grp_assgnmnt_mthd;
}).error(function (result) {
alert("Unable to retrieve dropdown values");
});
Problem is values are getting populated , like
and we are displaying the values accordingly. The results are like
[0] {id:"1",value:"Chapter Non-Event"}
[1] {id:"2",value:"NHQ Campaign"}
But the row_details.grp_typ is "NHQ Campaign".
Even though I assign it , the drop down option is not selected accordingly .
Have I to assign it to the value property only ? What am I missing ?

use ng-repeat instead of ng-options
eg:
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceEdit.populateGroupTypeDetails(selGroupType)" ng-model="referenceEdit.groupType">
<option value="-1">---</option>
<option ng-repeat="groupType.value for groupType in referenceEdit.groupTypes track by groupType.id" value="{[{groupType.id}]}"> {[{groupType.value}]} </option></select>

Related

How can I keep old value selected option on edit request in VueJS 2?

I have some records with relationships on db. I fetch them on laravel backend like this
$teams = Team::with('skills')->find($id);
return response()->json([
'teams' =>$teams,
], Response::HTTP_OK);
and on front i am using vue js to edit team record
editTeam(id) {
axios.get('/teams/'+id+'/edit')
.then(response => {
// console.log(response)
this.id = response.data.teams.id,
this.edit_team_name = response.data.teams.team_name
...//some other data
this.edit_team_skills = response.data.teams.skills (//i want to pass here response.data.teams.skills.skills_name but it does not work)
})
},
and edit modal
<div class="form-group">
<label class="form-label" for="team_name">Team Name</label>
<input v-model="edit_team_name" id="team_name" type="text" class="form-control" >
</div>
<div class="form-group">
<label class="form-label select-label" for="team_foreman">Team Skill</label>
<select v-model="edit_team_skills" class="form-select" id="team_foreman" >
<option v-for="skill in skills" :value="skill.id" :key="skill.id">{{skill.skills_name}}</option>
</select>
</div>
So when i click edit button i get team_name on v-model="edit_team_name" but i dont know how to keep selected also old value for v-model="edit_team_skills"

How to select rows based on string options in html vue js?

I need to add new rows based on the select options.
If my option is "kfc" I need to select a particular row. If my selected option is "cemrt", I need to add another row.
<div class="card-content" v-for="(bok, index) in rules" :key="index">
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Booked</label>
<select class="form-control" v-model="bok.name">
<option value="SEENAT">SEENAT</option>
<option value="CEMRT">CEMRT</option>
<option value="KFC">KFC</option>
</select>
</div>
</div>
</div>
<div class="row" v-if="bok.name == SEENAT"> //NOT WORKING FROM HERE
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms(if any)</label>
<input type="text" class="form-control" v-model="bok.data.head" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == KFC">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms(if any)</label>
<input type="text" class="form-control" required="">
</div>
</div>
</div>
</div>
But I am using this code not able to add rows based on the options.
My vue js code is
addForm = new Vue({
el: "#addForm",
data: {
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
},
methods: {
addNewRules: function() {
this.rules.push({ name: null, section: null,data [{head:null,value:null}] });
},
},
});
If I use option value as 1,2,3 etc. I am getting the result.
But I need to send SEENAT,CEMRT,KFC as data. How can I able to achieve the result.
Hard to tell. A reproduction on codesandbox would be welcome.
What I can see in your code at a first glance :
1) You forgot quotes around the options keys and thus it expects a constant. The fact you're using double equals instead of triple doesn't help:
v-if="bok.name === 'SEENAT'" // this
v-if="bok.name == SEENAT" // instead of that
2) data should be a function:
data() {
return {
rules: [
{
name: null,
section: null,
data: [{ head: null, value: null }]
}
]
};
},

Using jQuery validate on select list

I have the following javascript:
var $step = $(".wizard-step:visible:last"); // get current step
var validator = $("#WizardForm").validate(); // obtain validator
var anyError = false;
$step.find("input").each(function ()
{
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
This is successfully validating all my input fields but upon trying to apply a similar method to the select type using code:
$step.find("select").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
My HTML is as follows:
<div class="wizard-step" id="step1" visibility="hidden" style="display: block;">
<div class="row">
<div class="col-md-6 column ui-sortable">
<div class="form-group">
<label class="control-label col-md-4" for="Tariff_Type">Tariff Type</label>
<div class="col-md-8">
<select style="width:100%;height:35px;border-radius:4px;padding-left:10px;" id="TariffType" name="TariffType" class="form-control input required">
<option value="">Please Select Tariff Type</option>
<option value="keypad account">Say Hello To Budget Extra Discount</option>
<option value="bill pay account">Standard 24H</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="TariffType" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</div>
How can I ensure that a TariffType value is selected using this method?
Try the .valid() method instead...
if (! $(this).valid()) { ...

2 Fields Added Together Do Not Add My Decimal Places

I have a webpage and i on this page i have a 1 dropdown and 3 fields:
Payment type
Amount
Fee
Total amount
My 'Amount' field is editable and my 'Fee' fields reads a value from my web.config file as there are 2 different fees depending on the option selected from the dropdown.
But my 'Total' field does not seem to add in my decimal places and i need it to and both these fields are set up as type="number".
All my code is below
Web.config
<!-- BACS Fee -->
<add key="BacsFee" value="25.00" />
<!-- Chaps Fee -->
<add key="ChapsFee" value="50.00" />
View
<div class="form-group">
<label class="col-sm-offset-1 col-sm-4 control-label">Payment method</label>
<div class="col-sm-4"><%: Html.DropDownList("PaymentMethod_DropDownList", paymentMethods, new { #class = "form-control", #onchange = "showModal(ChapsModal)" } )%></div>
</div>
<div class="form-group">
<label class="col-sm-offset-1 col-sm-4 control-label">Amount</label>
<div class="col-sm-4"><%:Html.PrefixedTextBox("£", "OneOffPayment_Textbox", oneOffDefault, new { })%></div>
<div class="col-sm-offset-5 col-sm-7" id="OneOffPaymentValidation"><%:Html.ValidationMessage("OneOffPayment_Textbox")%></div>
</div>
<div class="form-group">
<label class="col-sm-offset-1 col-sm-4 control-label">Fee</label>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">£</span>
<div id="BacsFee">
<input id="BacsFee_Textbox" type="number" class="form-control" value="<%= BacsFee %>" disabled>
</div>
<div id="ChapsFee">
<input id="ChapsFee_Textbox" type="number" class="form-control" value="<%= ChapsFee %>" disabled>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-offset-1 col-sm-4 control-label">Total amount</label>
<div class="col-sm-4"><%:Html.PrefixedTextBoxWithId("£", "TotalAmount_Textbox", "TotalAmount_Textbox", "", new { }, true)%></div>
</div>
JQuery
function showModal(modal) {
var selectedModal = '#' + modal.id;
var e = document.getElementById("PaymentMethod_DropDownList");
if (e.options[e.selectedIndex].text == 'CHAPS')
{
$(selectedModal).modal('show');
$('#ChapsFee').show();
$('#BacsFee').hide();
}
else
{
$('#ChapsFee').hide();
$('#BacsFee').show();
}
}
$(document).ready(function () {
$("#OneOffPayment_Textbox").keyup(function()
{
var val1 = parseInt($("#OneOffPayment_Textbox").val());
var val2 = parseInt($("#BacsFee_Textbox").val());
$("#TotalAmount_Textbox").val(val1 + val2);
});
});
The issue is because you're parsing the provided value to integers which do not have floating points. Use parseFloat() instead:
$("#OneOffPayment_Textbox").keyup(function() {
var val1 = parseFloat($("#OneOffPayment_Textbox").val());
var val2 = parseFloat($("#BacsFee_Textbox").val());
$("#TotalAmount_Textbox").val(val1 + val2);
});
If you require the result to be rounded to two decimal places, use toFixed(2):
$("#TotalAmount_Textbox").val((val1 + val2).toFixed(2));
use parseFloat for decimal like parseFloat($("#OneOffPayment_Textbox").val());
The parseFloat() function parses a string argument and returns a floating point number.

How to remove models that are no longer bound to dom

I have a form that has a bunch of logic about which elements to show using ng-if. For example I might have a country drop down and if USA is selected it will show the state drop down which was conditioned upon an ng-if for country. Perhaps this was not the best way to do it so if there are recommendations for a different approach for the next project that will be appreciated but I need to finish this project with few major modifications.
The problem is if a user selects a country say USA and then a state, and then selects a different country. The state is still selected within the model. So how would I go about removing the state field. There are deeply nested ng-if's (think about 4-5 levels).
Example
<div ng-if="root.originCountry == 'PAK'">
<div ng-if="root.productType == 'Custom Football Jersey' || root.productType == 'Sublimated Football Jersey'">
<div class="control-group">
<label class="control-label" for="productTypeType">{{root.productType}} Type</label>
<div class="controls">
<select ng-model="root.productTypeType" ng-options="type for type in pakJerseyTypeList" bs-select required></select>
</div>
</div>
<div class="ordered-container">
<div ng-if="root.productTypeType">
<div class="control-group">
<label class="control-label" for="bodyColor">Body Color</label>
<div class="controls">
<select ng-model="root.bodyColor" ng-options="color for color in bodyColorList" bs-select required></select>
</div>
</div>
<div ng-if="root.bodyColor == 'Other'">
<div class="control-group no-count">
<label class="control-label" for="bodyColorPmsCode">Body Color PMS Code</label class="control-label no-count">
<div class="controls">
<input type="text" ng-model="root.bodyColorPmsCode" name='bodyColorPmsCode' required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can utilize the ng-change directive to your advantage; set one on a parent select box and implement its handler to clear the values of any child select box depending on it.
Here's a quick snippet illustrating how to achieve this:
<select
ng-model="selectedCountry"
ng-options="country for country in countries"
ng-change="clearCity()">
</select>
<select
ng-model="selectedCity"
ng-if="isJapanSelected()"
ng-options="city for city in japanCities"
ng-change="setCity(selectedCity)">
</select>
var app = angular.module('myModule', []);
app.controller('MainCtrl', function($scope) {
$scope.countries = ['Japan', 'Brasil', 'England'];
$scope.selectedCountry = 'Brasil';
$scope.selectedCity = '';
$scope.japanCities = ['Tokyo', 'Yokohama', 'Osaka']
$scope.isJapanSelected = function() {
return $scope.selectedCountry == 'Japan';
};
$scope.getCity = function() {
return $scope.selectedCity;
};
$scope.setCity = function(city) {
$scope.selectedCity = city;
};
$scope.clearCity = function() {
if (!$scope.isJapanSelected()) {
$scope.selectedCity = '';
}
};
});
Live demonstration on plunker

Categories

Resources