Sum dropdown values on AngularJS 4 - javascript

I'm trying to make a page where the user will choose a few drop-downs, each option of each dropdown will have a number value. I want Angular to show the sum of all selected options and store on a variable or something so I can use it on an IF.
Here's the code I used as a workaround:
<select id="" [(ngModel)]="select1">
<option value="1">name1</option>
<option value="2">name2</option>
</select
<select id="" [(ngModel)]="select2">
<option value="1">name1</option>
<option value="2">name2</option>
</select
<b>Points: </b> {{ select1 -- select2 }}
However this does not store in any variable so I cannot use on an IF.
I want to do something like this:
<label *ngIf="summ > 16; else error">Higher than 16 </label>

Call a function with ngIf where it adds all the model variable values
<label *ngIf="calculatesum() > 16"; else error">Higher than 16 </label>
and in TS
calculatesum(){
return select1 + select2 +select3 + select4;
}

Related

How do you pass a value to a hidden form field when a certain option is selected?

I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.
To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />
You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.

Angularjs dropdown select value

I have this dropdown
<select class="form-control" ng-model="LoanDetailsVM.PaymentPeriodMonths">
<option value="1">Monthly</option>
<option value="3">Quarterly</option>
</select>
The LoanDetailsVM.PaymentPeriodMonths can be either 1 or 3, but the proper option is not selected when I'm opening the page.
Is there anything else I need to add in order for the correct option to be selected?
You should use [(ngModel)] instead of ng-model and [ngValue] instead of value:
<select class="form-control" [(ngModel)]="LoanDetailsVM.PaymentPeriodMonths">
<option [ngValue]="1">Monthly</option>
<option [ngValue]="3">Quarterly</option>
</select>

Clear value from select element when filtering in Angular

I have a basic select element with options that dropdown hooked up to a small set of data which is being filtered using the dropdown. Initially on page load the select element has a value of undefined (according to the console), however after selecting any option it takes on the value of that option.
How can I go back to undefined? Basically I want to be able to select an option in the list that will go back to displaying all of the data. Below is my app on JSBin:
App
add a custom filter function
$scope.filterByGenre = function(item){
if (!$scope.selectedGenre || $scope.selectedGenre == 'All'){
return true;
}
return item.genre && item.genre.indexOf($scope.selectedGenre) != -1;
}
change your <select> to this:
<select ng-model="selectedGenre"
ng-options="choice as choice for (idx, choice) in genres"
name="genre"
class="genre-dropdown">
</select>
change <tr ng-repeat="... filters to this:
<tr ng-repeat="movie in movies | filter:searchBar | filter:filterByGenre | orderBy:sortType:sortReverse">
Online Demo - http://jsbin.com/riyafupexu/1/edit?html,js,output
I'm confused, you are using ng-options but you also provided the static options.
For a quick fix in this case you can remove that ng-options and uncomment that All and remove it's value.
Like:
<select ng-model="selectedGenre"
ng-change="handleSelect()"
name="genre"
class="genre-dropdown">
<option selected="selected" value="">All</option>
<option value="Action">Action</option>
<option value="Adventure">Adventure</option>
<option value="Animation">Animation</option>
<option value="Biography">Biography</option>
<option value="Comedy">Comedy</option>
<option value="Crime">Crime</option>
<option value="Drama">Drama</option>
<option value="Fantasy">Fantasy</option>
<option value="History">History</option>
<option value="Horror">Horror</option>
<option value="Romance">Romance</option>
<option value="Sci-Fi">Sci-Fi</option>
<option value="Western">Western</option>
</select>
You can do it this way:
$scope.selectedGenre = "";//set the model to blank.
$scope.genres = 'All,Action,Adventure,Animation,Biography,Comedy,Crime,Drama,Fantasy,History,Horror,Romance,Sci-Fi,Western';
//create an array after splitting the commas
$scope.genresAry = $scope.genres.split(',');
$scope.genresAry.push("");//push blank into the array.
In HTML use genresAry.
<select ng-model="selectedGenre"
ng-options="choice as choice for (idx, choice) in genresAry"
ng-change="handleSelect()"
name="genre"
class="genre-dropdown">
working code here

Angular ng-option custom filter multiple dropdowns

I have a project requiring that I build an angular menu with multiple drop down filters. As the end user selects one filter the other two filters update accordingly. I already learned the hard way not to use the ng-repeat with options and now for the life of me cannot figure out how to get my select fields in the view to reflect changes that will be caused by events in the view.
Here is my html:
<div class="large-8 columns" ng-controller="democontroller" >
<label> Demographic
<select ng-options = "x.demo as x.demo for x in groups | filteredDemo" ng-model = "demoValue">
<option value="">Please Select A Group</option>
</select>
</label>
<label> Location
<select ng-model = "locationValue" ng-options = "x.location as x.location for x in groups ">
<option value="">Please Select A Location</option>
</select>
</label>
<label> Days
<select ng-model = "dayValue" ng-options = "x.days as x.days for x in groups " >
<option value="">Please Select A Meeting Day</option>
</select>
</label>
</div>
<div class="large-8 columns">
<p>
</p>
</div>
</div>
and here is my current javascript:
var app=angular.module('selectapp',[]);
app.controller('democontroller',['$scope','$http',function($scope,$http){
$http.get("jsoninfo.php").success(function(response){$scope.groups=response;});
$scope.currentValues = ['1','0','0'];
app.filter('filteredDemo', function(){
return function(e){
if(e == 1){
return e;
}
}
});
}]);
any help would be greatly appreciated.
I'll try to explain the howto with two levels (group and location). Adding levels should be obvious after that.
ng-model value of the first select list will hold the selectedGroup
ng-model value of the second select list will hold the selectedLocation
In ng-options, We must select the full object, but we will diplay only the name. Thus we will have ng-options="group as group.name for group in groups". We select the full object because in the dependent dropdown, we will iterate over the nested collection, here selectedGroup.locations
<label>Demographic
<select ng-model="selectedGroup" ng-options="group as group.name for group in groups">
<option value="">Please Select A Group</option>
</select>
</label>
<label>Location
<select ng-model="selectedLocation" ng-options="location as location.name for location in selectedGroup.locations">
<option value="">Please Select A Location</option>
</select>
</label>
Here is a demo fiddle I've made with dummy data.

How to add selected attribute to ng-repeated dropdown form?

I have a form that builds out multiple widgets based on some JSON data. In part of that form is a select dropdown, and some items have different options selected by default.
ie:
object 1 {
tag: "products"
}
The select dropdown in the ng-repeat widget
<select class="btn-success form-control">
<option value="companies">companies</option>
<option value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
^ Here if this was object 1, I'd need the products option to gain the selected attribute.
What I've tried so far, that hasn't worked, but so you can see my thinking:
HTML
ng-repeat="stuff in stuffs"...
<select class="btn-success form-control">
<option value="companies">companies</option>
<option ng-if="widget.selectedTag(stuff.tag)" value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
Controller
this.selectedTag= function(s) {
console.log(s);
if (s = 'news'){
return 'selected';
}
}
How would you go about this?
Found answer here: Initializing select with AngularJS and ng-repeat
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
So in my case:
<option value="products"
ng-selected="{{stuff.tag == 'products'}}">products</option>

Categories