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.
Related
In my vuejs project I have a form section to add facilities and appliances to a house. There is an input field to input a facility and button to add it to a list, but I am a bit unsure how to do this.
My HTML:
<div class="input-wrapper flex align-end">
<div class="input-wrap">
<label for="facility">Add facility like pooltable or swimmingpool</label>
<input type="text" v-model="facility" id="facility" class="bordered border-green" />
</div>
<div class="input-wrap">
<button class="button button-main button-green-light add-button" data-button-type="add" #click.prevent="addFacilities">Add</button>
</div>
</div>
The goal is to make it add the item to a list when clicking "Add" and then empty the input field, so I end up with something like this
<ul>
<li>Pool table<li>
<li>Swimming Pool<li>
<li>Fussball table</li>
</ul>
<input type="hidden" name="facilities" value="pool table, swimmingpool, fussball table" />
You need to use v-for for this case.
in list template part
<ul>
<li v-for="item in items" :key="item">{{item}}</li>
</ul>
in form template part
// .. form items
<input type="text" v-model="input">
<button type="button" #click="addToItems">Add</button>
in vue component js part
data: {
input: '',
items: [],
},
methods: {
addToItems() {
if (!this.input) {
// input value is empty
return;
}
// add item to reactive array items
this.items.push(this.input);
// clear the input
this.input = '';
}
}
See example here: https://codepen.io/Mgorunuch/pen/LYYGmQp
I'm making a quiz app.To show the progress of the quiz there is question pallette of small boxes which turn yellow when users click on any of the the radio button to show that the user has attempted the question.Along with this there is a button to move to the previous question.To show the users initial answer I have used ng-checked directive with some logic in the controller.Everything is working fine but after attempting a question when I move to the next question and click on the same option as the previous question then the question pallette box does not turn yellow.But when I click on the other option it works fine.
.html
<div class="questionsBox" >
<div class="questions">{{liveCtrl.questions[liveCtrl.activeQuestion].question}}</div>
<ul class="answerList">
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===1" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,1)" name="answerGroup" value="0" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionA}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===2" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,2)" name="answerGroup" value="1" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionB}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===3" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,3)" name="answerGroup" value="2" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionC}}</label>
</li>
<li>
<label>
<input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===4" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,4)" name="answerGroup" value="3" > {{liveCtrl.questions[liveCtrl.activeQuestion].optionD}}</label>
</li>
</ul>
<div class="questionsRow">
<button ng-disabled="liveCtrl.questions.length==liveCtrl.activeQuestion+1" class="subques btn btn-lg btn-secondary" ng-click="liveCtrl.nextQuestion()">Save & Next</button>
<button ng-click="liveCtrl.prevQuestion()" ng-disabled="liveCtrl.activeQuestion == 0" class="subques btn btn-lg btn-secondary" >Previous</button>
</div>
</div>
//Question Pallete
<div class="question-pallete">
<div id="{{$index}}" ng-repeat="question in liveCtrl.questions" class="square">
<a ng-click="liveCtrl.gotoQues($index)">
{{$index + 1}}
</a>
</div>
//jquery to give color to the boxes
<script type="text/javascript">
$(document).on('click',"input[name='answerGroup']",function(){
var qid=$(this).data('id');
console.log(qid);
$('#'+qid).addClass('box-color');
});
</script>
Controller functions
this.nextQuestion=()=>{
live.activeQuestion++;
//console.log(live.activeQuestion);
};
this.prevQuestion=()=>{
live.activeQuestion--;
//console.log(live.activeQuestion);
};
this.gotoQues=(qno)=>{
live.activeQuestion=qno;
}
this.answers=(qid,option)=>{
//console.log(qid);
live.useranswers[qid]={
q:option
};
When I'm tried to console qid in jquery part it outputs the same qid for the same option in the next question but it is not the case for other options.I think "data-id" in html is not updating for that case.Sorry If I was not able to explain it properly.
I find 2 issues with your implementation.
I don't see ng-model in any of your input field.
Why don't you use ng-class instead of using jquery to get the id and add class?
<label ng-class="val==0 ? 'highlight':''">
<input type="Radio" ng-model="val" ng-value="0">Option A</label>
Here is the jsfiddle link
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);
}
Happy day everyone,
I have started to work on angular-seed project. I have found jsfiddle with TODO example and would like to add another <input type-"text">
Is there any ways to split <input type-"text"> to make it look like two <input type-"text"> in the same row? My idea is similar to this jsfiddle made with jQuery, where merged string should be added to the <li> element
many thanks,
app.html
<div ng-controller="MyCtrl">
<input type="text" ng-model="enteredName" />
<button ng-click="addName()">Add</button>
<ul>
<li ng-repeat="name in names">
{{ name }}
<button ng-click="removeName(name)">×</button>
</li>
</ul>
</div>
app.js
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.names = ['batman', 'grumpy', 'yulu'];
$scope.addName = function(){
$scope.names.unshift($scope.enteredName);
}
$scope.removeName = function(name) {
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
}
}
You don't want to make it "look like" two inputs, you actually use 2 inputs and change your array of strings to an array of objects with only slight changes in the view.
$scope.names = [{first: 'bat',last: 'man'}];
View
<input type="text" ng-model="enteredName.first" />
<input type="text" ng-model="enteredName.last" />
<button ng-click="addName()">Add</button>
<ul>
<li ng-repeat="name in names">
First: {{ name.first }} Last: {{ name.last }}
<button ng-click="removeName(name)">×</button>
</li>
</ul>
DEMO
I want to use ng-repeat object in ng-model value as sub string.. can i use this?? My scenario is:
<form id="booking_form" name="booking_form" ng-app="myApp" ng-submit="tasksubmit()">
<ul class="items-list">
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<div class="items-list-item-image">
<p>
<input type="checkbox" ng-model="tasksubmit{{task.id}}" />
</p>
</div>
<div class="items-list-item-detail">
<p>
<strong>{{task.title}}</strong>
</p>
</div>
</li>
</ul>
</form>
in < input type = checkbox > i want to generate dynamic ng-model with prefix of tasksubmit (this is initialized in controller as $scope.tasksubmit = {} ). Any body please help me out in this problem.....
If I understand correctly you want all task.id as property inside your tasksubmit object as you have initialized it as object in your controller so you can do as below:
<input type="checkbox" ng-model="tasksubmit[task.id]" />
Just add model with ngRepeat's instance property
Like this
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<input type="checkbox" ng-model="task.isChecked" />
</li>
You'll find value of isChecked from $scope.taskslist
JSFIDDLE