i'm working on AngularJS
I have this problem:
screenshoot
In HTML i used this code for show submit button for two type of form.
One for TEXT Form and one for ENUM Form:
<div ng-controller="githubController3">
<div ng-repeat="x in names | limitTo:1">
<br>
<p>
<h3>{{ x.name }}</h3></p>
</div>
</div>
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<div ng-repeat="x in names">
{{ x.name }}*
<form ng-submit="submitForm()">
<a ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ name }} </input>
</a>
<a ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</a>
<br>
<a ng-if="x.type=='long'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</a>
<br>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
<!--NEL CASO DI ENUM PRESENTA QUESTO FORM-->
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
{{ x.name }}*
<form ng-submit="submitForm2()">
<a ng-if="x.type=='enum'">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
</a>
<br>
<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit Enum!
</button>
</div>
</div>
</form>
How I can show only one submit button instead of multiple repetition of it ?
thanks to all
Error in this line you write submit form inside ng-repeat. It will repeat how much data in names array.
<div ng-repeat="x in names">
Remove ng-repeat then it show only one submit button
Related
I have two form now which needs to submitted differently right now i want the both the forms to be submitted with single submit button.
<div class="row m-b-4">
<div class="col-md-12">
<div class="form-group label-static type-text" :class="{'has-error': errors && (errors.final_billing || errors.final_billing_was_added)}">
<label class="control-label" for="id_final_billing" v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" v-cloak>
Final Billing <span v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" class="req" v-cloak>*</span>
</label>
<div v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" v-cloak>
<div class="radio" style="display: inline-block;">
<label>
<input type="radio" name="final_billing" :value="true" v-model="form.final_billing" />
<span class="circle"></span>
<span class="check"></span>Yes
</label>
</div>
<div class="radio m-l-4" style="display: inline-block;">
<label>
<input type="radio" name="final_billing" :value="false" v-model="form.final_billing" />
<span class="circle"></span>
<span class="check"></span>No
</label>
</div>
</div>
{% include "m_close_out_form.html" %}
{% include "a_close_out_form.html" %}
{% include "d_close_out_form.html" %}
when we select final billing one of these forms gets opened based on some condition
<button type="submit" form="entry" class="btn btn-primary btn-raised">Submit</button>
I have the below button in other html file
<button type="submit" form="close-out-form" class="btn btn-primary btn-raised">Approve</button>
So when i click on the Submit button with form="entry" i need to make submit on both the forms form="entry" and form="close-out-form"
so I created a button to open a calendar with an ng-click function:
<button type="button" class="btn btn-default" ng-click="main.open_date()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
I put it inside an ng-repeat, and when I added more fields & tested the button, this happened:
Aren't rows created by ng-repeat unique because they have their own index?
What am I missing here?
update: here is the code for my main.open_date():
me.open_date = function(key){
if(!key){key='date';}
me.uibdates[key] = true;
}
template code:
<tr ng-repeat="detail in main.employee_details track by $index">
<td>
<ui-select ng-model="detail.status" theme="bootstrap">
<ui-select-match placeholder="Select status" allow-clear>{$$select.selected.name$}</ui-select-match>
<ui-select-choices repeat="status in main.status | propsFilter: {name: $select.search} | limitTo: 100">
<div ng-bind-html="status.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</td>
<td>
<p class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="main.open_date()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<input type="text" class="form-control" placeholder="Select date"
uib-datepicker-popup="MM/dd/yyyy"
ng-model="detail.date" is-open="main.uibdates['date']"
ng-change="main.date_change()" />
</p>
</td>
<td>
<input type="text" class="form-control" ng-model="detail.remark" placeholder="">
</td>
<td>
<button style="display: inline; width: 35px;"class="form-control btn btn-primary btn-sm" ng-click="main.add_field($index);" ng-if="$index == (main.employee_details.length - 1)">
<span class="glyphicon glyphicon-plus"></span>
</button>
<button style="display: inline; width: 35px;" class="form-control btn btn-danger btn-sm" ng-click="main.delete_field($index);" ng-if="main.employee_details.length != 1">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
In my imagine, you can customize your code:
HTML:
<div ng-repeat="item in listItems track by item.id + $index">
<input class="datetime-picker" id="datepicker_{{item.id}}" />
<button ng-click="main.open_date(item.id)" class="open-datetime-picker">Open</button>
</div>
Angularjs
main.open_date = function(id){
$("datepicker_" + id).datetimepicker();
}
Everything inside the ng-repeat are repeated except the index. If you didn't use the index, the button is not unique.
in function main.open_date() can you use id instead class or html tags
like this
$('#datetimepicker1').datetimepicker();
Did you add $index in ng-repeat? Example: <div ng-repeat="item in listItems track by $index"></div>
Or, if your item have an ID field: <div ng-repeat="item in listItems track by item.id + $index"></div>
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>
in there i want to add shopping cart in my project. i have try make it but its still want work.
this my controller :
function postCreate(){
echo '<pre>';
print_r(Request::all());
exit;
$data['list'] = DB::table('package')
->join("cms_car","cms_car.id","=","package.id_cms_car")
->join("zone","zone.id","=","package.id_zone")
->select("package.*","cms_car.car as name_car","cms_car.photo as car_photo");
return view('detail',$data);
}
and here my view for listing :
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-petrol.png') }}" style="max-width:15px;">
#else
#endif
{{$row->driver}}</p>
<p>
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-driver.png') }}"style="max-width:15px;">
#else
#endif
{{$row->fuel}}</p>
<h6 class="post-price">price :</h6>
<p>Rp. {{$row->price}}</p>
</div>
</div>
<hr>
<div class="col-md-6">
Unit Quality :<br><br>
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity" class="form-control input-number" value="1" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-6">
<h3 style="margin-top:40px" id="price{{$row->id}}">Rp. {{number_format($row->price)}}</h3>
</div>
</div>
</div>
#endforeach
in there i want to make cart it only add when i change the unit quantity
form input name : quantity
have someone tell me what improvements do i have to make to the code to achieve my goal?
I recommend using this package Crinsane/LaravelShoppingcart
There are somany shopping cart module available on github. They are very easy to integrate, try one of them:
LaravelShoppingcart
laravel-cart
i'm working on ACTIVI in AngularJS.
I need to submit forms, so i created it with a submit button. The problem is that each submit button is a bit different (one is for text type form, another for enum type forms) and with new form the previously button is repeated twice.
As you can see this one is ok:
.
But the next form repeat the previously submit button:
This is the code in html
<div ng-controller="githubController3">
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<div ng-repeat="x in names">
{{ x.name }}*
<div ng-if="x.id=='name'">
<input type="text" name="nome" ng-model="formData.properties[0].value" placeholder="{{x.name}}"> {{ value }} </input>
</div>
<div ng-if="x.id=='email'">
<input type="email" name="email" ng-model="formData.properties[1].value" placeholder="{{x.name}}"> {{ email }} </input>
</div>
<div ng-if="x.id=='income'">
<input type="number" name="numero" ng-model="formData.properties[2].value" placeholder="{{x.name}}"> {{ income }} </input>
</div>
</div>
</div>
</form>
<div ng-controller="completeTaskAction">
<form ng-submit="submitForm()">
<br>
<button ng-show="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span>Submit!
</button>
</div>
</form>
</div>
</div>
<div ng-controller="githubControllerForm1">
<div ng-controller="completeTaskAction2">
<div ng-repeat="x in names">
<div ng-if="x.type=='enum'">
<!--/////////////////////////////////-->
<form ng-submit="submitForm2()">
<select ng-model="formData2.properties[0].value" ng-options="y.id as y.name for y in x.enumValues "></select>
<br>
<button ng-hide="x.type==enum" type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</div>
</div>
</form>
</div>
</div>
I tried (as you can see) with ng-show / hide / ng-if but doesnt work...
The first form is working fine because the button is outside ng-repeat. In the second case the submit button is inside ng-repeat.