passing attribute of element to a function in angular 4/5 - javascript

I want to pass attribute values of elements to a function at a button click and here's how i am doing it
<div>
<ul #list>
<li class="radio" *ngFor="let option of options; let j = index" id={{i}}-{{j}} #item>
<label><input type="radio" #opt name={{i}} value={{option}} /> {{option}} </label>
</li>
</ul>
</div>
<button type="button" (click)='func(opt.value, item.id, list)'>submit</button>
what i am doing here is
I am passing the value of radio button(first arg)
passing the id of the list item(second arg)
passing the reference of the entire list (third arg)
But of course it's not working the error message says cannot read value of undefined(first arg) and I suspect the same will happen for the rest of the argument as well.
So my question is how do i pass the attribute value to the function?
PS: I am new to angular stuff

You could set variables to the selected option's value and item ID on change() and pass those in when you click the button.
<div>
<ul #list>
<li class="radio" *ngFor="let option of options; let j = index" id={{i}}-{{j}} #item>
<label><input type="radio" #opt name={{i}} value={{option}} (change)="selectedOptionValue=option.value; selectedItemID=item.id" /> {{option}} </label>
</li>
</ul>
</div>
<button type="button" (click)='func(selectedOptionValue, selectedItemID, list)'>submit</button>
Just be sure to check those values in your backend func function to see if they're set.

Related

Get the list of all selected check boxes with Vue.js

How can I get a list of all check boxes that I selected with Vue?
This is my HTML which works and shows me a list of my products with a checkbox.
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product.id" name="product" type="checkbox" />
<label :for="product.slug"><span></span></label>
</li>
What I want is that when I click on a button, it fetches all check boxes that I selected. And give me all the values.
But I can't figure out how to do it, because it'll break when I even try to add a v-model to the checkbox.
Just bind every checkbox value with a product and the v-model to the array checkedProducts
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product" name="product" type="checkbox" v-model="checkedProducts" />
<label :for="product.slug"><span></span></label>
</li>
...
data(){
return{
...
checkedProducts:[]
....
}
}

AngularJS : one ng-click call the function twice why?

I have following angularjs code. When I click li tag that function is invoke twice. That means on click two request is passing and i'm getting two response why? Even i change ng-click to only radio button that function invoke only once why?
<li ng-click="togglePrice(2);">
<input type="radio" name="personalGroup" ng-model="watchlist" value="watchlist" id="watchlist">
<label for="watchlist" >My Watchlist</label>
</li>
script
$scope.togglePrice = function (price) {
console.log(price+"newwww");
.................
}
You get this behaviour because of <input type="radio"> inside your <li>
You can write <li ng-click="togglePrice(2);$event.preventDefault()"> to get rid of second click. However your radio button state will not change.
DEMO plunkr 1
Maybe you wanted something like:
Controller
$scope.watchlist = 'City1';
$scope.list = ["City1", "City2","City3"];
HTML
<li ng-repeat="watchlist in list">
<label>
<input type="radio" name="personalGroup"
ng-model="$parent.watchlist"
ng-value="watchlist"
ng-change="togglePrice(watchlist)" />{{watchlist}}
</label>
</li>
DEMO plunkr 2

How to get radio button selected value from dynamically generated radio buttons?

Hi I am developing web application in angularjs. I am generating radiobuttons dynamically using ng-repeat as below.
<ul>
<li ng-repeat="level in permissions">
<input name="level.perm_levelname" type="radio" ng-model="level.perm_levelname" value="{{level.perm_levelname}}"> {{level.perm_levelname}}
<a ng-click="gotopermMap({permisssionID: level.id})">View</a>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()" />
I am trying to get selected radio button as below.
$scope.apply=function()
{
var permname = $scope.name;
console.log($scope.level.perm_levelname);
}
I am getting error Cannot read property 'perm_levelname' of undefined. May i get help here to get selected radio button? Thank you
group radio buttons by a name and specify a common scope variable for radio buttons ng-modal
<ul>
<li ng-repeat="level in permissions">
<input name="myradiobtn" type="radio" ng-model="myradioBtnValue" ng-value="level.perm_levelname">
{{level.perm_levelname}}
<a ng-click="gotopermMap({permisssionID: level.id})">View</a>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>
Use ng-click event for radio button to get current selected value and assign the value a scope object. then get the value from saved scope abject while you click apply button.
DEMO:
function TodoCtrl($scope) {
$scope.permissions= [{perm_levelname:"hai"},{perm_levelname:"bye"},{perm_levelname:"come"},{perm_levelname:"go"}]
$scope.apply=function()
{
alert($scope.currecntClickValue);
}
$scope.currecntClick=function(currecntClickValue)
{
$scope.currecntClickValue=currecntClickValue.perm_levelname;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="level in permissions">
<input name="groupName" type="radio" ng-click="currecntClick(level)" ng-value="level.perm_levelname">
{{level.perm_levelname}}
View
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>
</div>
</div>
you should use radio button group like this--
<ul>
<li ng-repeat="level in permissions">
<input name="btnGroup" type="radio" ng-model="radioButtonValue" value="{{level.perm_levelname}}">
{{level.perm_levelname}}
<a ng-click="gotopermMap({permisssionID: level.id})">View</a>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>
And inside of Controller-
$scope.radioButtonValue='';
$scope.apply=function()
{
var permname = $scope.name;
console.log($scope.radioButtonValue);
}

Iterating array of object in angular ng-repeat

I have an object like this
var questions= [{ QuestionId:"1",
QuestionName:"loreum ispum?",
Answers: [{option:"A",Score:10},
{option:"B",Score:10}
]
},
{ QuestionId:"2",
QuestionName:"loreum ispum?",
Answers: [{option:"A",Score:10},
{option:"B",Score:10}
]
}]
Iterating through ng-repeat
<ul ng-repeat="question in vm.questions">
<div class="">{{question.QuestionName}}</div>
<input type="text" ng-model="getdetails.QuestionId" ng-value="question.QuestionId" style="display:none"/>
<li ng-repeat="answer in question.Answers track by $index">
<input type="radio" name="questionId_[$index]">" ng-model="getdetails.Score" ng-value="answer.Score" />
</li>
<button class="btn btn-success no-broder-radius" ng-click="change(getdetails)">Submit</button>
</ul>
and clicking on submit button I need to get the Question id and selected input value.
Controller :
$scope.getdetails={};
$scope.change=function(getDetails) {
// I am getting only input radio value not getting question id
}
I am getting only input radio value not getting question id
If getDetails is a $scope variable then you can directly access it in your controller, you don't need to pass it from view.
Try this:
<ul ng-repeat="question in vm.questions">
<div class="">{{question.QuestionName}}</div>
<input type="text" ng-model="getDetails.QuestionId" ng-value="question.QuestionId" style="display:none"></input>
<li ng-repeat="answer in question.Answers track by $index">
<input type="radio" name="questionId_[$index]">" ng-model="getdetails.Score" ng-value="answer.Score" />
</li>
<button class="btn btn-success no-broder-radius" ng-click="change(question)">Submit</button>
</ul>
Now in change function, you will have access to the full object.

Getting the selected radio button from radio buttons inside a div?

I have a div which contains several radio buttons, like this:
<div name="type" id="type">
<ul class="options-list">
<li>
<input type="radio" name="myname1" value="121312" id="myid1">somevalue
</li>
<li>
<input type="radio" name="myname2" value="121312" id="myid2">somevalue
</li>
</ul>
</div>
Now one of the two is checked, how could I get that one using plain JavaScript or PrototypeJS?
Thanks!
You can use,
if(document.getElementById('myid1').checked){
alert(document.getElementById('myid1').value)
}
if(document.getElementById('myid2').checked){
alert(document.getElementById('myid2').value)
}
Just giving an idea.
Well assuming they all have the same name you could do this:
function getCheckedRadio(rbGroupName) {
var rb = document.getElementsByName(rbGroupName);
for (i = 0; i < rb.length; i++) {
if (rb[i].checked) {
return rb[i].id;
}
}
}
Now you could call this within a click/change event handler to return the ID.

Categories