what is the simplest way to display a radio button and dropdown list using templating in angular js? I have a plunker where i'd like to display the radio button group(quest#4) options as dynamic values - i am not sure how to do so. I am having the same issue with the selects(quest#5) as well. Any help is much appreciated.
http://run.plnkr.co/eHxbQn2lm1uTE2JI/
I couldn't see your attempt at using a <select> in your code, so here's an abstracted example, if you had the choices like so:
.controller('AppControl', ($scope)->
$scope.answers =
q1: null
q2: null
$scope.options = {
"option 1": "val1",
"option 2": "val2"
}
)
Then you could make a radio button list would look like this:
<span ng-repeat="(key, value) in options">
<input type="radio" ng-model="answers.q1" ng-value="value"/> {{key}}
</span>
And a select would look like this:
<select ng-model="answers.q2"
ng-options="value as key for (key, value) in options">
</select>
EDIT
To answer the second part of your question below: "how do I use ng-show in this case?":
To do this, you need to add the possibility of having a "show if" type condition in your questions. If there is a condition, then you only want to show the question if that condition is met. Your HTML for each question would change to look like this:
<div ng-repeat="question in questionnaire"
ng-include="'questionnaire'"
ng-show="(question.condition == null) || {{question.condition}}"></div>
Note that you check whether a condition has been specified, and if it hasn't, then the ng-show expression would evaluate to true. If it has, we interpolate that condition so that we can use the same syntax as we would for other ng-shows.
You then just need to adjust your question to include a condition, for example:
{
number: "5",
question: "Which of the following sweets do you like?",
type: "DD",
condition: 'questionnaire[$index-1].answer != "blue"',
values :[
{ name: "hardcandy" },
{ name: "chocolate" },
{ name: "other" },
]
}
questionnaire[$index-1] refers to the previous question ($index is from ng-repeat, check the docs), and .answer only works because I have used ng-model="question.answer" when I answered your previous query. I would personally add this ng-model attribute to all of your questions.
You can see it working here: Plunker
Related
Not sure how else to title this. I'm using ng-options to generate a drop down. The source array is of the following form:
[{
id:1,
name: 'Bob'
},
{
id:2,
name: 'Tom'
}...(etc)
]
my ng-options looks like this:
ng-options="item.name as item.name for item in myObj
which I need since the ng-model is to the name elsewhere. However, on the ng-change, I want to send (among other things) the item.id. But I can't figure out how to access that at that point. Not only is item.id undefined in the ng-change, even item is undefined at that point. But, I can't use it in the `ng-options since I need it to model to the name elsewhere.
How do I access item.id for use in the ng-change?
This should do the trick:
item as item.name
I have an extremely simple md-radio-group and I am having a tough time setting the default value. The group is using an object (which I am assuming is related to the problem).
Please reference my codepen example.
I am defaulting the md-radio-group to the 2nd option but the radio button is never selected.
Am I missing something?
Couple of changes here:
You are interpolating the value of the radio. Doing so is unncessary, and loses reference to the object in the array for which you are iterate. Change your value to ng-value="option".
In your controller, set your default option. Since array positions start at 0, for your second option, you'll use [1].
$scope.optionExample = $scope.options[1];
A simple way if you add another attribute to make default selection, like below
$scope.statusList = [{ id: "APN", status: "Approved", isChecked: true }, { id: "VIP", status: "Scheduled", isChecked: false }, ];
in HTML
<input type="checkbox" ng-model="item.isChecked" ng-repeat="item in statusList"/>
<label class="form-control" style="width:305px"> {{item.status}} </label>
I basically have the same question as this guy, but using Vue JS instead of jQuery.
I have a list of N groups bound to my array ensemble_groups and represented by radio buttons. Selected value is mapped to selected_group.
I have a list of actors bound to my array cast with the variables actor_id, actor_name and groups. Each actor is pre-assigned to any number of groups. They're represented by checkboxes and mapped to an array visible_actors (when checked).
Here's my Vue JS powering the above data (I imagine the method is all jacked up, and I probably need a computed property of some sort):
new Vue({
el: '#schedule-builder',
data: {
selected_group: 'Entire Cast',
visible_actors: [],
ensemble_groups: [
"Entire Cast",
"Leads",
"Dancers",
"Children",
"Deselect All",
],
cast: [
{
actor_id: "123",
actor_name: "Carl",
groups: ["Entire Cast","Leads",],
},
{
actor_id: "234",
actor_name: "Max",
groups: ["Entire Cast","Leads","Children",],
},
{
actor_id: "345",
actor_name: "Sheryl",
groups: ["Entire Cast","Dancers",],
},
{
actor_id: "456",
actor_name: "Chip",
groups: ["Entire Cast","Children",],
},
],
},
methods: {
selectGroup: function() {
// uncheck all
visible_actors=[];
// add people in this group to visible_actors
for person in cast {
if (person.groups.indexOf(selected_group) > -1) {
visible_actors.push(person.actor_id);
}
}
}
})
When a user clicks on a radio button for a group, I want to select only the actors' checkboxes who are in that group. So if the user selects "Children", only the actors in the "Children" group should be checked (Max and Chip, per my example).
And, obviously, checking an actor (rather than a group) shouldn't affect the rest of the selections. I mention this because I got it partially working at one point, where selecting a group also selected the correct people, but when I clicked on a person suddenly everyone else was deselected. User can click either a group OR a person, and the expected behavior is that
Here's my HTML template:
<div id="schedule-builder">
<div class="select-groups">
<h3>Ensemble Groups</h3>
<template v-for="group in ensemble_groups">
<input name="select_group[]" id="group_#{{ $index }}"
v-model="selected_group"
:value="group"
#click="selectGroup"
type="radio">
<label for="group_#{{ $index }}">#{{ group }}</label>
</template>
</div>
<div class="select-individuals">
<h3>Cast Members</h3>
<template v-for="person in cast">
<input name="actors[]" id="actor-#{{ $index }}"
v-model="visible_actors"
:value="person.actor_id"
:checked="visible_actors.indexOf(person.actor_id) > -1"
type="checkbox">
<label for="actor-#{{ $index }}">
#{{ person.actor_name }}
</label>
</template>
</div>
</div>
Any help is appreciated... I've been banging my head on it for a couple days already.
This is a tough question to answer well but I'll try.
I would not rely on a computed property for the checked state. Let v-model handle that for you. You can do
<input
type="checkbox"
name="actors[]"
v-model="selected_actors"
:value="actor">
and that will manage the array of selected_actors for you as their values change.
I'm at work and plan on elaborating on this answer a little later but here's a fiddle of how I'd approach the situation: https://jsfiddle.net/crswll/806shzzg/7/
i'm new to angular, stuck with, what i hope is a rather easy problem.
I Have a question and several answers. There might be 1-3 correct answers.
Answers can be selected by checkbox. In the value field i save if the answers is correct (true) or wrong (false). I was hopping that i can simply get things work by getting ng-valid and ng-invalid.
E.g. The answers is wrong, when clicked on the checkbox for this answer the anwswer text should be red (or sth.). When deselecting it should go back to normal. Same with correct answers.
That's how i currently try to do it:
<label ng-repeat="a in q.answers"><input type="checkbox" value="{{ a.correct }}" ng-pattern="true" ng-model="field.value"> {{ a.title }}</label>
So if the value is true it should match the pattern 'true'. Does not working, ng-pattern does not seem to have any effect.
Anyone know how to solve this.
If it's more sophisticated than i thought i might be doing the check with jquery. But i want to try pure angular first.
PS: i tried to find a answer to this, but i couldn't find anything that suits my problem.
Adding onto the class suggestion from Jared Reeves, here is one way that you might implement the checkbox answers:
<label ng-repeat="answer in question.answers" ng-class="{'invalid': answer.checked && !answer.correct, 'valid': answer.checked && answer.correct}">
<input type="checkbox" ng-change="select(field, answer)" ng-model="answer.checked"> {{answer.title}}
</label>
Selected answer: {{field.value}}
// inside the controller
$scope.field = {
value: null
};
$scope.question = {
answers: [
{title: "A (incorrect)", correct: false},
{title: "B (incorrect)", correct: false},
{title: "C (correct)", correct: true},
{title: "D (incorrect)", correct: false}
]
};
$scope.select = function(field, answer) {
if (answer.checked) {
field.value = answer;
} else {
field.value = null;
}
};
Here's a working example: http://plnkr.co/edit/Qa2VrukMD61y8Jv4iKjx?p=preview
I am using angularjs for one of my project. I am trying to implement a filtering functionality.
I am constructing the filter check boxes using the code below
<div class="checkbox" ng-repeat="incidentType in keywords.incidentType">
<label><input type="checkbox" value={{incidentType}}>{{incidentType}}</label>
</div>
The result is shown in image below
On checking or unchecking the check boxes, I need to create a object like below. Based on this json object I will send a request to server to fetch the matching data.
{
"application": [
"Athena",
"EWS"
],
"incidentType": [
"Publishing Failure",
"Security Failure"
]
}
Any idea on how can this be achieved in angularjs. Any help is much appreciated.
for something like this, you can use an object like what you want to send as the model, then bind it to the data in your ng-repeat. I let you check here first : http://jsfiddle.net/DotDotDot/gcEJH/
I've taken your sample code and I just added a controller with an object ($scope.checked ) which I use for the ng-model in each checkbox
$scope.checked={application:{}, incidentType:{}};
then, in the HTML
<div class="checkbox" ng-repeat="incidentType in keywords.incidentType">
<label><input type="checkbox" ng-model='checked.incidentType[incidentType]' ng-true- value='{{incidentType}}'>{{incidentType}}</label>
</div>
The ng-model part tells angular to put the value in the incidentType part of the object, under the kay corresponding to the value. This won't give you the exact same object, but you will have something like :
{
"application": {
"Athena": false,
"EWS": true,
"EWindows": true
},
"incidentType": {
"Publishing Failure": true,
"Security Failure": true
}
}
which is actually pretty close, and from which you can create your request (or recreate the same object you wanted easily)
Hope this helps, have fun
=)