I have $scope.getmaindata list with 5 objects, in each object i have a list contain multiple values which user achieved. And $scope.myproviders contain levels with id and level name. I want to check the multiple values of each user corresponded to that service when id matches. and if user have level 3 in his list i have to show the input box next to it. I tried some answers in stackoverflow but none of them solved my issue.The problem i am getting with code is when the levelsqualified list of the each user is not in the order, so i thought i have to write a for loop and wrote but not succeeded.
Here is the working plunkr with more code Plunkr v1
Update
The values are binding for the first time with $scope variables but when i uncheck some of them levelsqualified list of each user is not updated
Plunkr v2
<div class="col-md-12 col-sm-12" ng-repeat="mydata in getmaindata">
<ul class="list-inline">
<h4>{{mydata.firstname}}</h4>
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]==providers.level">
{{providers.level}}
</label>
</span>
</li>
<li>
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if user have third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
</ul>
</div>
Extending on #Randi Radcliff's plunker, this plunker might do the trick.
On the ng-checked just did:
ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"
I believe you need to change your ng-checked (if I am understanding you correctly).
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]">
{{providers.level}}
</label>
and you need to add an ng-if for your input box like so:
<li ng-if="mydata.levelsqualified[$index]==3">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I hope this is what you needed.
EDIT
I changed the Plunker to incorporate both answers and a little hacking. I added an ng-change event and changed your ng-model. See Below:
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" name="amlcprovidercheck{{$index}}" ng-model="mydata.selected" ng-change="addCheckChoice(mydata, providers)" ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1">
{{providers.level}}
</label>
</span>
</li>
<li ng-if="mydata.levelsqualified.indexOf(3) > -1">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I also added the following function:
$scope.addCheckChoice = function (c, p) {
var main = $scope.getmaindata.indexOf(c);
var idx = c.levelsqualified.indexOf(p.id);
if (c.selected === true) {
c.levelsqualified.push(p.id);
alert("You selected " + p.id + " for " + c.firstname);
}
else {
c.levelsqualified.splice(idx, 1);
alert("You removed " + p.id + " for " + c.firstname)
}
for (var i = 0; i < c.levelsqualified.length; i++) {
for(var x = 0; x < $scope.myproviders.length; x++){
if (c.levelsqualified[i] == $scope.myproviders[x].id) {
c.selected = true;
}
}
}
}
If this isn't what you need, let me know. You may need to do a little tweaking.
Related
I have a set of radio buttons. If a user selected the value "yes" I want to show an additional box on the form.
https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts
HTML.component
<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">
<div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
<label for="{{item.section}}" class="col-12 customradio"
><span>{{item.section}}</span>
<input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
<span class="checkmark"></span>
</label>
</div>
<!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
<div class="col-md-8" >
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
</div>
Can anybody get this to work and show me what I am doing wrong here please?
You need to access the value of the form control:
*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">
STACKBLITZ
Everything you write in the template is resolved against the corresponding class (or against template variables), so you have to refer to the JavaScript control like this:
*ngIf="form.controls['selectedButton'].value === 'yes'"
Call a function to set flag based on value of the radio button, (ngModelChange)="onRadiochange($event)"
Try like this:
Working Demo
.html
<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />
<div class="col-md-8" *ngIf="showTitle">
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
.ts
onRadiochange(e) {
if(e.section == 'yes'){
this.showTitle = true
} else {
this.showTitle = false
}
}
It can also be done in one line like this:
<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />
Whenever yes checkbox is selected, you have to display the title textbox.
In that case, change your code like this.
In personal.component.ts, add this variable.
yesSelected: boolean = true;
Also in ngOnInit(),
this.form.valueChanges.subscribe(val=>{
if(val.radioButtonsGroup.selectedButton.section === "yes")
this.yesSelected = true;
else
this.yesSelected = false;
});
In personal.component.html, rewrite your if condition like this.
<div class="col-md-8" *ngIf="yesSelected">
<input type="text" formControlName="title" placeholder="Title">
</div>
These changes will show the title textbox only when the yes check box is selected.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I have a customized search form which has many inputs. Each input comes under specific category. This is about searching for a car. Hence, as a user, you can search for specific car condition, color, size and so on. each category(e.g condition) has many options that you can select from. You can select many conditions. The question is: How can I pass many values (e.g user can select car condition to be new, like new, good) through the same name (e.g name is condition)? also, is it possible to pass all values from different category(e.g car condition, car color, car size) through only one name(e.g name condition)? the last question: what is the best practice to do that? I mean assign each value to different name or many values with the same category to the same name or assign all values from different categories to only one name, if this is possible how can many values be extracted in Django view function from the same name? for only one value it can be done by:
condition = request.GET.get('condition')
Here is portion of the form:
<form method="GET" action="{% url 'some url' %}" data-action="" name="options_search" enctype="multipart/form-data" formnovalidate >
<ul class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="con_1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="con_2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="con_3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="con_4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="con_5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="con_6" type="checkbox"
/>
salvage
</label>
</li>
</ul>
<ul class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="colr_1" type="checkbox"
/>
black
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="colr_2" type="checkbox"
/>
blue
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="colr_3" type="checkbox"
/>
red
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="colr_4" type="checkbox"
/>
white
</label>
</li>
<ul class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="size_1" type="checkbox"
/>
compact
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="size_2" type="checkbox"
/>
medium
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="size_3" type="checkbox"
/>
large
</label>
</li>
</ul>
</form
You might want to consider making a model for each of these variables and saving to your database the possibilities of each variable, such as:
class Condition(models.Model):
id = models.AutoField(primary_key=True)
variable = models.CharField(max_length=255)
And saving Condition entries to your database for 'New,' 'Used,' etc.
The same could be done for each type of variable which the user might select (i.e., model for Size, Color, etc.)
Then create a separate model for Car. This will be an instance of a Car the user might search for.
A separate model CarVariable will hold a foreign key to the car and a foreign key to each variable that might describe it. Note that while the model for CarVariable has fields for each type of variable, it should only reference one variable at a time. This will make sense later when filtering QuerySets.
class Car(models.Model):
id = models.AutoField(primary_key=True)
model = models.CharField(max_length=255)
class CarVariable(models.Model):
id = models.AutoField(primary_key=True)
car = models.ForeignKey(Car, models.DO_NOTHING, blank=True, null=True)
condition = models.ForeignKey(Condition, models.DO_NOTHING, blank=True, null=True)
size = models.ForeignKey(Size, models.DO_NOTHING, blank=True, null=True)
color = models.ForeignKey(Color, models.DO_NOTHING, blank=True, null=True)
Note that there will likely be multiple CarVariable entries for each Car (i.e., one for size, one for color, etc.)
Now the view for the page which renders the form in question should include in the context a QuerySet of each variable for the form.
size = Size.objects.all()
Use this in the template to render the input field for each checkbox instead of hard coding each one.
<ul class="att-list">
{% for s in size %}
<li class="checkbox ">
<label>
<input id="{{ s.id }}" name="condition" class="multi_checkbox" value="{{ s.id }}" type="checkbox"
/>
{{ s.variable }}
</label>
</li>
{% endfor %}
</ul>
This will not only provide you an easier way of rendering the form, but it will also make the submission of the form and retrieval of the appropriate car MUCH easier if you use AJAX instead of a Django Form.
When the user clicks the search button, have it call a Javascript function that takes the value of each 'condition,' 'size,' 'color,' etc class and add them to an array corresponding to their class.
$('.condition').each(function(i, obj) {
condArray.push(obj.value);
});
When each array has been populated, make an AJAX call to a Django view which will essentially find all Car objects for which a CarVariable object with the id of the specified variable exists.
$.ajax({
method: 'POST',
url: 'django/view/url/',
data: {
condition: {'condArray': condArray},
size: {'sizeArray': sizeArray},
color: {'colorArray': colorArray},
csrfmiddlewaretoken: grabcsrf('csrftoken')
},
success: function (response) {
if (response.result === 'OK') {
console.log(response.cars);
}
}
});
Declare this function to get the CSRF token:
function grabcsrf(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURI(cookie.substring(name.length + 1));
break
}
}
}
return cookieValue
}
Now for the Django view.
from django.db.models import Q
def get_cars_by_variable(request):
if request.method == 'POST':
if request.is_ajax():
conditions = request.POST.getlist('condArray')
sizes = request.POST.getlist('sizeArray')
colors = request.POST.getlist('colorArray')
var_hits = set()
cond_hits = CarVariable.objects.filter(Q(condition__in=[con for con in conditions]))
size_hits = CarVariable.objects.filter(Q(size__in=[size for size in sizes]))
color_hits = CarVariable.objects.filter(Q(color__in=[color for color in colors]))
for con in cond_hits:
var_hits.add(con)
for size in size_hits:
var_hits.add(size)
for color in color_hits:
var_hits.add(color)
return JsonResponse({
'result': 'OK',
'cars': list(var_hits)
}, safe=False)
return HttpResponse.status_code
return HttpResponse.status_code
From there, you should get to where you need to go. The response of the AJAX call will give you a list of the info you need. You could use those variables to render a new page with the cars you need or you could you Javascript to arrange the info on the page. Whatever you like.
I hope this adequately addressed your question. If not, I hope you at least got something useful from it. Good luck!
https://docs.djangoproject.com/en/2.0/topics/db/queries/#complex-lookups-with-q-objects
I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).
Okay so here is my setup i have the following array:
answers = [answer1, answer2]
with these i do the following:
<form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
<div class="col-xs-1" style="width: 1%">
<div class="radio">
<label class="i-checks">
<input type="radio" name="a" ng-model="answer.is_correct">
<i></i>
</label>
</div>
</div>
<div class="col-xs-11">
<input type="text" ng-model="answer.answer" class="form-control" placeholder="Svar">
</div>
</div>
</form>
Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true
However what happens right now is that if i click the first and then second both values have is_correct = true
So what can i do?
Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:
<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">
If you really need to set a flag you can easily achieve that with a watcher:
$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
component.question.answers.forEach(function(answer) {
answer.is_correct = answer === correctAnswer ? true : false;
});
});
I think I got the Title right but here is what I want to do
$(document).ready(function(){
var oVars = {};
var withones;
etc //didnt work in what of my attempts to declare variables here so didnt cont.
$('.checkboxes :checkbox').click(function(){
var $this = $(this);
if($(this).is(':checked')){
oVars[this.id] = true;
console.log( oVars)
}
if(!$this.is(':checked')){
oVars[this.id] = false;
console.log( oVars)
}
at this point it is to my understanding that the oVars is like
oVars{
withones : true,
withoutOnes : false, //if unchecked
dispReg :true //if checked
}
I see the values of the properties change when I check the boxes
I want to be able to do something like this (globally):
var withOnes = oVars['withones'];
var withoutOnes = oVars['withoutOnes'];
etc;
I want to declare these variables globally and I want their values to change according to true or false because that is what is being assigned in the if $(this).is(':checked') to demonstrate which one is checked. The reason why I want to do this is that i want to make a function where the argument is the updated value.
});
I would make a code like below somewhere else in the code
if(withOnes){ // I want withOnes to be true if checked false if unchecked
process code if true
}
I tried to do something like below. please help me figure out how to change these variables value so I could use the variable other places in the code
if(withones = true){
console.log("withones checked")
}
if(withones = false){
console.log("withones unchecked")
}
but only "withones checked" was displayed every time the checkbox was changes.
});
HTML:
<div>
<div class="checkboxes">
<div class="dificulty">
<label for="withones" class="labelOuter" >
<input type="checkbox" id= "withones" class = "regular-checkbox big-checkbox"><label for="withones"></label> <span class="label">With ones</span>
</label>
<label for="withoutOnes" class="labelOuter" >
<input type="checkbox" id = "withoutOnes" class= "regular-checkbox big-checkbox"><label for="withoutOnes"></label><span class="label">Without ones</span>
</label>
</div> <!-- dificulty -->
<div class="view">
<label for="dispReg" class="labelOuter" >
<input type="checkbox" id = "dispReg" class= "regular-checkbox big-checkbox"><label for="dispReg"></label><span class="label">Display cash register</span>
</label>
<label for="hideReg" class="labelOuter" >
<input type="checkbox" id = "hideReg" class= "regular-checkbox big-checkbox"><label for="hideReg"></label><span class="label" title ="gets rid of image">hide cash register</span>
</label>
<label for="hideItems" class="labelOuter" >
<input type="checkbox" id = "hideItems" class= "regular-checkbox big-checkbox"><label for="hideItems"></label><span class="label">hide items</span>
</label>
<label for="showItems" class="labelOuter" >
<input type="checkbox" id = "showItems" class= "regular-checkbox big-checkbox"><label for="showItems"></label><span class="label">show items</span>
</label>
</div> <!-- view -->
</div>
</div>
</div>
an updated jsfiddle after reviewing an answer
The window-object could be just what you want.
Look at that:
function setTest() {
window.test = 'hello';
}
setTest();
document.write(test); // gives 'hello'
I don't know about other contexts but in the context of internet browsers, the window-object and all its members are available everywhere. Though it is more elegant to access them through the window-variable than directly.
What I want to say is:
Don't do:
test = 'hello';
alert(test);
Instead do:
window.test = 'hello';
alert(window.test);
Even though, they have in fact the exact same meaning! (if there is no hidden var test;)
But the first example will change its meaning completely, if var test; is called anywhere in the scope.
The second example on the other hand will stick with its meaning whether you add a var test; or not.