Angular 2 - Add Value of Checked Radio Button to Array - javascript

I am trying to get the checked radio button and add the value to an Array. Currently, i cannot remove the previously checked radio buttons, so basically it keeps adding to the array every time i select a radio button.
item.component.ts
displaySelectedConditions(event) {
if(event.target.checked) {
this.selectedConditionsArr.push(event.target.value);
}
}
item.component.html
<ul class="dropdown-menu">
<li *ngFor="let item of filteredItems | funder "> //generates 4 items
<a><input type="radio" (change) = "displaySelectedConditions($event);"
name="funder" id="{{item}}" value="{{item}}">
<label for="{{item}}" >{{item}}</label></a>
</li>
</ul><!-- Dropdown Menu -->

I would suggest if you want to have the values neatly stored somewhere, then make use of a form. Simple template driven form works well here, then you would have all your values stored in an object, here's a sample:
<form #radioGroup="ngForm">
<div *ngFor="let str of strings">
<input type="radio" [value]="str" name="str" ngModel />{{str}}
</div>
<hr>
<div *ngFor="let num of numbers">
<input type="radio" [value]="num" name="num" ngModel />{{num}}
</div>
</form>
This would create an object like:
{
str: "value here",
num: "value here"
}
And if you declare the form like the following, you can easily access the object values:
#ViewChild('radioGroup') radioGroup: NgForm;
Somewhere in component:
console.log(this.radioGroup.value);
Plunker

Related

Need help building Reactive Form of Radio Input List

I want to realize my selection with reactive Forms, i am new to this so here is my code:
I already tried to implement it with the documentation and the provided examples, but with no luck and destoying my single select radio button selection input. What do i need to implement in my .ts file and here in my html snippet to realize that?
Here is my working HTML Snippet:
<div *ngFor="let stream of myList">
<label>
{{ stream.sys }}
</label>
<p *ngFor="let type of stream.types">
<tr>
<input type="radio" name="nav"/>
{{ type.type.label }}
</tr>
</p>
</div>
I am looping over the outer list and the inner list with input Type radio. Everything works fine. Now i want to implement it to be Reactive Forms:
This is my desired Output for example:
Test
o Number 1
Test2
o Number 10
o Number 20
Test3
X Number 100
Value: Number 100 // or some id i have in my input data -> type.type.id
This navigation needs to be a select of one item and i want to show the form value unter my list as first step.
I tried something like this:
.html
<form [formGroup]="form">
<div *ngFor="let stream of myList">
<label>
{{ stream.sys }}
</label>
<p *ngFor="let type of stream.types">
<tr>
<input type="radio" name="name" formControlName="name" />
{{ type.type.label }}
</tr>
</p>
</div>
</form>
<p>
Value: {{ form.value | json}}
</p>
.ts
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = formBuilder.group({
name: ['']
});
Your looping on myList. The formBuilder should contain an array of groups. And every single group should contain a 'name' control. 'value' should not be needed. And If you want to preset something you can set it in the formbuilder.
This is not related to the problem but I dont think the <tr> is incorrect in a <p>. Instead you could just add the loop on a div instead of a paragraph and then remove the tablerow

JQuery list item, set the list value for input field when user click the list item respectively

I have a two input text fields. I need to pass the value from the dynamic list items when a user clicks it respectively.
User story:
When a user selects first input text field and clicks the list item, It should pass value from the selected list item to first input text field.
and
When a user selects second input text field and clicks the list item, It should pass value from the selected list item to second input field.
Here is my code: https://jsfiddle.net/shekhar123/uork6yhu/24/
<form action="/users" method="post">
<div>
<input type="text" id="firstInputField" palceholder="select the listitem" />
<input type="text" id="secondtInputField" palceholder="select the list item" />
</div>
<h3>dynamic list item</h3>
<div>
<ul class="list-group text-center" id="ulItem"></ul>
</div>
//Jquery file
var listItem = [{
name: "name1"
}, {
name: "name2"
}, {
name: "name3"
}];
$(document).ready(function() {
for (var prop in listItem) {
$("#ulItem").append('<li class="list-group-item list-group-item-action">' + listItem[prop].name + '</li>');
}
});
I will be very thankful for your help and suggestion.
The key is to set the a variable when one of the text fields gets the focus. The rest doesn't change. DEMO
HTML:
<input id="input1" class="fields">
<input id="input2" class="fields">
<ul id="mylist">
<li>1st value</li>
<li>2nd value</li>
<li>3rd value</li>
<li>4th value</li>
</ul>
JS:
let selectedField = null;
$(".fields").on("focus", function() {selectedField = $(document.activeElement);});
$("#mylist li").on("click", function() {
if (selectedField != null)
selectedField.val($(this).html());
});
This is somewhat limited, especially if there are other inputs visible for which you then should reset the variable again when they get the focus. I personally would prefer dropdowns AKA comboboxes.

Displaying different <tr> depending on radio button (in Knockout)

OK, here goes.
Problem 1:
I want to, based on the radio button checked, display a tr-element or not. Threre will be 3 buttons, displaying 'unlocked achievements', 'locked', and 'all' (both locked + unlocked).
The code below shows how it looks when I try to call three different functions, each setting the tr:s visibility to true/false depending on radio button checked. (D.R.Y, I know, but right now I'm just looking for the functionality).
Problem 2:
Making the for-loop run. itemsListForFilter is declared globally, outside the filter function. itemsListForFilter is a copy of an object arrayMap which is initiallized and filled elsewhere in the code. The array contains items with - amongst other things - the boolean "radioCheck", with the default value "true", which I want to check.
When I access itemsListForFilter in the function where the copying takes place it's filled with items but...
When I try to access itemsListForFilter in the filter function it displays as having the value of null. So the copy is "lost" somewhere :)
View / HTML:
<div class="widget-header-container">
<h3 class="widget-header">Achievements</h3>
<div class="wrapper">
<input type="radio" name="appliedFilter" value="all" data-bind="checked: filterAll"/><label for="all">Show all</label>
<input type="radio" name="appliedFilter" value="unlocked" data-bind="checked: filterUnlocked"/><label for="unlocked">Unlocked</label>
<input type="radio" name="appliedFilter" value="locked" data-bind="checked: filterLocked"/><label for="locked">Locked</label>
</div>
<div><div class="widget-header-line-game1"></div><div class="widget-header-line-game2"></div><div class="widget-header-line-shadow"></div></div>
</div>
<div>
<div class="rounded-box" style="padding:15px;padding-top: 0;background-color:#fff;overflow:hidden;">
<table id="game-achievements" class="table table-condensed" style="margin-top:10px;">
<tbody data-bind="foreach: viewGame.achievements()">
<tr data-bind="visible: radioCheck" style="display: none">
Viewmodel / JS:
filterUnlocked: function(){
return filter('unlocked');
},
filterLocked: function(){
return filter('locked');
},
filterAll: function(){
return filter('all');
},
filter: function(x){
for (var item in itemsListForFilter){
if (x === 'locked'){
item.radioCheck = '!achieved';
}
if (x === 'unlocked') {
item.radioCheck = 'achieved';
}
else {item.radioCheck = true;}
}
Observe that the viewmodel is an object and not a function:
var gamesViewModel = {
self: this,
settings: null,
gameId: null,
authorized: false,
(...)
Right now the functions named filterUnlocked, etc (except filter) displays as "unused properties" in the JS file. What should i do to call them from the HTML? Or is there a better way to accomplish what I'm looking for?
Thank you.
You can get the effect you want with less complexity.
First, the radio group. The checked binding in Knockout kind of replaces (or acts like) the name attribute for a radio group: all the radio buttons should share one. The bound variable will be updated to the value of the selected radio button, which will cause others bound to the same variable to de-select. Now you have one variable to look at instead of three.
Instead of doing filtering by hiding rows, it is more usual to have a computed filter the data, and the table just displays it. The computed can get the data from "outside"; it doesn't have to be an observable or part of the viewmodel (although if it's not an observable, you'll need to tell the computed when to update, if the source changes).
Here's a little working example:
var achievements = [{
name: 'The locked one',
locked: true
}, {
name: 'The unlocked one',
locked: false
}];
var vm = {
appliedFilter: ko.observable('all'),
viewGame: {}
};
vm.viewGame.achievements = ko.computed(function() {
var filter = vm.appliedFilter();
if (filter === 'all') {
return achievements;
}
return ko.utils.arrayFilter(achievements, function(item) {
return item.locked === (filter === 'locked');
});
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="widget-header-container">
<h3 class="widget-header">Achievements</h3>
<div class="wrapper">
<input type="radio" value="all" data-bind="checked: appliedFilter" />
<label for="all">Show all</label>
<input type="radio" value="unlocked" data-bind="checked: appliedFilter" />
<label for="unlocked">Unlocked</label>
<input type="radio" value="locked" data-bind="checked: appliedFilter" />
<label for="locked">Locked</label>
</div>
</div>
<div>
<div class="rounded-box" style="padding:15px;padding-top: 0;background-color:#fff;overflow:hidden;">
<table id="game-achievements" class="table table-condensed" style="margin-top:10px;">
<tbody data-bind="foreach: viewGame.achievements()">
<tr><td data-bind="text: name"></td></tr>
</tbody>
</table>
</div>
</div>

how to get ng-repeat checkbox values on submit function in angularjs

I have a form which has 10 checkboxes. By default angular js triggers on individual checkbox. I want to grab all selected check box values on submit action only. Here is my code...
<form name="thisform" novalidate data-ng-submit="booking()">
<div ng-repeat="item in items" class="standard" flex="50">
<label>
<input type="checkbox" ng-model="typeValues[item._id]" value="{{item._id}}"/>
{{ item.Service_Categories}}
</label>
</div>
<input type="submit" name="submit" value="submit"/>
</form>
$scope.check= function() {
//console.log("a");
$http.get('XYZ.com').success(function(data, status,response) {
$scope.items=data;
});
$scope.booking=function(){
$scope.typeValues = [];
console.log($scope.typeValues);
}
I am getting empty array.
Can somebody tell how to grab all selected checkbox values only on submit event.
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.SELECTED" ng-true-value="Y" ng-false-value="N"/>
</div>
<input type="submit" name="submit" value="submit" ng-click="check(items)"/>
$scope.check= function(data) {
var arr = [];
for(var i in data){
if(data[i].SELECTED=='Y'){
arr.push(data[i].id);
}
}
console.log(arr);
// Do more stuffs here
}
Can I suggest reading the answer I posted yesterday to a similar StackOverflow question..
AngularJS with checkboxes
This displayed a few checkboxes, then bound them to an array, so we would always know which of the boxes were currently checked.
And yes, you could ignore the contents of this bound variable until the submit button was pressed, if you wanted to.
As per your code all the checkboxes values will be available in the typeValues array. You can use something like this in your submit function:
$scope.typeValues
If you want to access the value of 3rd checkbox then you need to do this:
var third = $scope.typeValues[2];
Declare your ng-model as array in controller, like
$scope.typeValues = [];
And in your template, please use
ng-model="typeValues[item._id]"
And in your controller, you will get this model array values in terms of 0 and 1. You can iterate over there.

Angular JS show input when radio checked

I have a javascript array like so:
$scope.quantityMachines = [
{ 'snippet' : 'One' },
{ 'snippet' : 'Two' },
{ 'snippet' : 'Three or more',
'extraField' : true },
{ 'snippet' : 'Not sure, need advice' }
];
Then I have a list of radio buttons generated by Angular JS using the array:
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
</li>
</ul>
This works. In the array there is an extraField with value true in one of the indexes. I need Angular to show an extra input field when a radio button with the extraField setting is checked. The array may change to have more than one index with the extraField value.
So the extra field would look something like this.
<input type="text" ng-model="extraInfo" ng-show="howMany" />
Other than knowing to use ng-show, I'm not sure what would be the correct way to do this. The above example of course does nothing.
You could use ng-if and ng-show combination and a scope variable to keep track what is selected. ng-if will make sure the textbox is not added unwantedly to the DOM and ng-show to show and hide as the radio gets toggled.
In your input:-
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
and in your Radio add ng-click="option.selected=quantity.snippet"
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" ng-click="option.selected=quantity.snippet"/>
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
</li>
</ul>
and add in your controller:-
$scope.option = { selected:'none'};
Bin
You could even use howMany to track what was selected except that you need to set it as a property to an object on the scope (Since ng-repeat creates its own child scope and proto inheritance comes to play).
So in your radio just add ng-model="option.howMany", in your controller add $scope.option = { }; and in the text box ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"
Bin
If only you had a plunker...without that try this
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines"
value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="extraInfo" **ng-if="quantity.extraField"** />
</li>
</ul>
http://jsbin.com/biwah/1/edit?html,js,output
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="quantity.extraInfo" ng-show="quantity.extraField" />
</li>
</ul>
The easiest way to show something when radio button is checked is the following:
Lets say you have a radio-group with: ng-model="radio-values"
To show or hide your input then depends on the values within the radio-group: value="radio-value1", value="radio-value2"
To finally show or hide the input field (lets say you want to show something if "radio-value1" is set) you do:
<input ng-show="radio-values == 'radio-value1'" ...>

Categories

Resources