I am trying to loop on dynamic form with star rating. The issue is that this works in the first iteration only.
Here is my code: (with smarty).
<form action="">
forEach{ $lstCodesNotation as $oneCodeNotation}
<p>{$oneCodeNotation.description}</p>
<input class="star star-5" id="star-5" type="radio" name="star"/>
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" type="radio" name="star"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" name="star"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" name="star"/>
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" name="star"/>
<label class="star star-1" for="star-1"></label>
{/foreach}
</form>
Your foreach is not write correctly, you have to put it into the { like this :
{foreach $lstCodesNotation as $oneCodeNotation}
Related
I have a form with four inputs. If the sum of three inputs are greater than the first input (inh_gesamtsumme #ctrl_259) a message in parsley should be shown:
<fieldset class="inhalte_calculate">
<div class="widget widget-text mandatory">
<label for="ctrl_259" class="mandatory">Summe Geschäftsausstattung gesamt:</label>
<input type="number" name="inh_gesamtsumme" id="ctrl_259" class="text mandatory" value="0" required="" placeholder="Summe in €" step="any">
<label for="ctrl_168" class="mandatory">... davon Elektronik:</label>
<input type="number" name="inh_sum_elektronik" id="ctrl_168" class="text mandatory" value="33" required="" placeholder="Summe in €" step="any">
<label for="ctrl_169" class="mandatory">... davon stationäre/fahrbare Maschinen:</label>
<input type="number" name="inh_fahrbahr" id="ctrl_169" class="text mandatory" value="33" required="" placeholder="Summe in €" step="any">
<label for="ctrl_170" class="mandatory">... davon Waren und Vorräte:</label>
<input type="number" name="inh_sum_waren" id="ctrl_170" class="text mandatory" value="33" required="" placeholder="Summe in €" step="any">
</div>
</fieldset>
We need to calculate this in a javascript, not in html code
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 want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
<label for="comments" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle
I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
<label for="input_0">Your label</label>
<input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
<div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
<div ng-message="required">Custom Message</div>
</div>
</md-input-container>
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
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?