Say I have a block of html like the following and I need to loop through an array of objects and display a label for each option.
I can do this easily using ng-repeat for the labels and the input individually, but in order for my style framework to update the checked input correctly, the input needs to be directly above the label in the document.
How can I do this without wrapping each group of input + label in another dom element? (This would destroy the style of the list as well)
need:
<input type="radio" name="rGroup" value="1" id="r1" />
<label class="radio radio-plan-lg" for="r1">
Billed every<br><span>1 month</span>
</label>
<input type="radio" name="rGroup" value="2" id="r2" />
<label class="radio radio-plan-lg" for="r2">
Billed every<br><span>3 months</span>
</label>
<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio radio-plan-lg" for="r3">
Billed every<br><span>6 months</span>
</label>
not:
<input type="radio" name="rGroup" value="1" id="r1" />
<input type="radio" name="rGroup" value="2" id="r2" />
<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio radio-plan-lg" for="r1">
Billed every<br><span>1 month</span>
</label>
<label class="radio radio-plan-lg" for="r2">
Billed every<br><span>3 months</span>
</label>
<label class="radio radio-plan-lg" for="r3">
Billed every<br><span>6 months</span>
</label>
Use ng-repeat-start:
<input ng-repeat-start="item in array" type="radio" name="rGroup" value="{{item}}" id="r{{item}}" />
<label ng-repeat-end class="radio radio-plan-lg" for="r{{item}}">
Billed every<br><span>{{item}} month</span>
</label>
See Documentation - Special repeat start and end points
Related
I am trying to create a custom pricing form. In which the buyer will be able to choose different options. And each option will have a associated price. After choosing the options the form will automatically show the total price. I am using GatsbyJS.
<form>
<div className="form-group">
<label>Beaf</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="50 USD" checked />
<label class="form-check-label" for="exampleRadios1">
Cheap Beaf
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="100 USD" />
<label class="form-check-label" for="exampleRadios2">
Expensive Beaf
</label>
</div>
</div>
<div className="form-group">
<label>Cheese</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="40 USD" checked />
<label class="form-check-label" for="exampleRadios1">
Cheap Cheese
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="80 USD" />
<label class="form-check-label" for="exampleRadios2">
Expensive Cheese
</label>
</div>
</div> <div className="form-group">
<label>Bread</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="30 USD" checked />
<label class="form-check-label" for="exampleRadios1">
Cheap Bread
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="60 USD" />
<label class="form-check-label" for="exampleRadios2">
Expensive Bread
</label>
</div>
</div>
<label>Total Price</label>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly />
</form>
I assume you are using react state with hooks. You need to use react state for this and change the price on onChange event. I just made a quick prototype for you.
https://codesandbox.io/s/stackoverflow-calculate-in-react-form-dum7k?file=/src/App.tsx
You only need to set prices for defaultChecked products in on component mount. It can be achieved with useEffect.
I have a small application of attempt online exam. My questions set are comes from DB using loop. I want to edit my already attempted exam. I have a answer set of questions. But I am not able to show auto select to attempt radio buttons.
Here is my answer set
{"1":"A","2":"A","6":"A","10":"A","14":"A","21":"B","26":"C","31":"B","33":"C","34":"B","54":"C"}
Here my questions which I am showing on view page using loop
<div class="row" style="margin-top: 20px;">
<section ng-repeat="count in subject.test_count" ng-cloak class="col col-3">
<div class="inline-group" ng-if="count%2!='0'">
<b style="width: 25px;display: inline-grid;">{{count}}</b>
<input type="radio" name="{{subject.name}}{{count}}"
id="a{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]"
value="A" ng-checked="true">
<label for="a{{subject.name}}{{count}}" >
<p>A</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="b{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="B">
<label for="b{{subject.name}}{{count}}" >
<p>B</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="c{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="C">
<label for="c{{subject.name}}{{count}}" >
<p>C</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="d{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="D">
<label for="d{{subject.name}}{{count}}" >
<p>D</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="e{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="E">
<label for="e{{subject.name}}{{count}}" >
<p>E</p>
</label>
</div>
</section>
There are a couple things that are off with this. First is that you are ngRepeating through the values of the test_count and not the actual objects, to resolve that you're going to want to do something like this:
<section ng-repeat="(key,value) in subject.test_count" ng-cloak class="col col-3">
{{key}} {{value}}
<span class="inline-group" ng-if="count%2!='0'">
<input type="radio" name="{{subject.name}}{{key}}"
id="a{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]"
value="A">
<label for="a{{subject.name}}{{key}}" >A</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="b{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="B">
<label for="b{{subject.name}}{{key}}" >B</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="c{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="C">
<label for="c{{subject.name}}{{key}}" >C</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="d{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="D">
<label for="d{{subject.name}}{{key}}" > D</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="e{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="E">
<label for="e{{subject.name}}{{key}}" >E</label>
</span>
</section>
Once you have your radio buttons and subject matching (I took some liberty with how I think you'd have the data setup) you need to seed the questiondata using the values you've provided above:
$scope.questiondata[0] = angular.copy($scope.subject.test_count);
Now we can see that $scope.questiondata[0][1] = $scope.subject.test_count[1] = 'A' which means that A will be selected.
Here is a sample of the full controller: https://plnkr.co/edit/fyJwfLc6Qb7b7p4ZLgqI
I have problems to select the checkbox of the following code via PHPUnit.
<div id="user_project">
<input type="checkbox" id="user_project_1" name="user[project][]" value="1" checked="checked" />
<label for="user_project_1">Project 1</label>
<input type="checkbox" id="user_project_2" name="user[project][]" value="2" /><label for="user_project_2">Project 2</label>
<input type="checkbox" id="user_project_3" name="user[project][]" value="3" checked="checked" />
<label for="user_project_3">Project 3</label>
<input type="checkbox" id="user_project_4" name="user[project][]" value="4" checked="checked" />
<label for="user_project_4">Project 4</label>
<input type="checkbox" id="user_project_5" name="user[project][]" value="5" checked="checked" />
<label for="user_project_5">Project 5</label>
<input type="checkbox" id="user_project_6" name="user[project][]" value="6" checked="checked" />
<label for="user_project_6">Project 6</label>
<input type="checkbox" id="user_project_7" name="user[project][]" value="7" />
<label for="user_project_7">Project 7</label>
<input type="checkbox" id="user_project_10" name="user[project][]" value="10" /><label for="user_project_10">Project 10</label>
<input type="checkbox" id="user_project_12" name="user[project][]" value="12" /><label for="user_project_12">Project 12</label>
<input type="checkbox" id="user_project_13" name="user[project][]" value="13" />
<label for="user_project_13">Project 13</label>
</div>
Normally I will tick the checkboxes using "$form["Name of checkbox"]->tick();" - but i cannot change the name (because it is generated via Symfony2).
Can somebody help me?
Suppose you retrieve the form in the $form object, try this for select the 2nd element:
$select = $form->get('user[project]');
$cb = $select[1]; // the second table row
$cb->tick();
Hope this help
I am using the following piece of code for selecting the first option for radio button, but somehow it doesn't seem to work
<label class="radio inline">
<input type="radio" ng-value="true" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1" ng-checked="true">Yes
</label>
<label class="radio inline">
<input type="radio" ng-value="false" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1">No
</label>
Can someone suggest some work around for this ?
Hi in your controller you have to set default value for contactNumberArray
please see here: http://jsbin.com/dafoj/1/edit
JS:
$scope.contactNumberArray ={
smsEnabled1 : true
};
HTML:
<label class="radio inline">
<input type="radio" ng-value="true" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1" ng-checked="true">Yes
</label>
<label class="radio inline">
<input type="radio" ng-value="false" name="smsEnabled" ng-model="contactNumberArray.smsEnabled1">No
</label>
I have a simple with two fields. Each field associated with two radio buttons.
I want to calculate the form progress..Markup of the form look like this
<fieldset>
<div>
<div class="btn-group">
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
</div>
<label for="FH1" class="radio-inline control-label">1st Option</label>
</div>
<br/>
<div>
<div class="btn-group">
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
</div>
<label for="FH1" class="radio-inline control-label">2nd Option</label>
</div>
</fieldset>
I have a directive define for formprogress
<formprogress progress={{progressValue}} />
Assume that "progressValue" is a scope variable, now I want to update this value somehow, to show the form progress.How it would possible?