I need to update datetimepicker[i] script inside ng-repeat but I do not know how to do that.
<div class='input-group date' id='datetimepicker{{$index+1}}'>
work successfully and made list of
<div class='input-group date' id='datetimepicker1'>
<div class='input-group date' id='datetimepicker2'>
but problem is script not update from model data
$('#datetimepicker{{$index+1}}').datetimepicker();
result is
$('#datetimepicker{{$index+1}}').datetimepicker();
I want to '#datetimepicker{{$index+1}}' change to'#datetimepicker1'
<tr data-ng-repeat="row in game.result">
<td>{{$index+1}}</td>
<td ng-bind="row.host"></td>
#*<td>
<input class="form-control text-center" data-ng-model="row.dateStart" />
</td>*#
<td ng-controller="DatepickerDemoCtrl">
<div class="input-group w-360">
<div class='input-group date' id='datetimepicker{{$index+1}}'>
<input data-format="yyyy/MM/dd hh:mm:ss" ng-model="row.dateStart" type='text' class="form-control" ng-required="true" />
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker{{$index+1}}').datetimepicker();
});
</script>
</div>
</td>
<td>
<select ng-model="row.gameState"
ng-options="c.Value as c.Text for c in game.states" class="form-control" required></select>
</td>
<td>
<input class="form-control text-center" data-ng-model="row.hostGoals" type="number" required />
</td>
<td>
<input class="form-control text-center" data-ng-model="row.guestGoals" type="number" required />
</td>
<td ng-bind="row.guest"></td>
</tr>
Update
I move my code inside controller and make html in controller
Controller - MVC
onlineResult.dateHtml = #"<script type=""text/javascript"">$(function () {$('#datetimepicker"+(i + 1).ToString()+ "').datetimepicker({format: 'YYYY/MM/DD HH:mm:ss'});});</script>";
and update view to
<p compile data-ng-bind-html="to_trusted(row.dateHtml)"></p>
My new problem is model bind in Get but not changed in Post.
When i submit form my Get data sent to controller not changed data
I used angularjs directive datetimepicker
https://material.angularjs.org/latest/demo/datepicker
Related
I update input with id='total' with event onchange. When I fill quantity input, the input total is updated with correct value but when i try to get the value from controller, it returns null. Any idea? Thanks
This is the code:
<div class="form-group" >
<input type="text" name="quantity" class="form-control" id="quantity" onchange="updateInput(this.value)" >
</div>
</td>
<td align="center">
<div class="form-group ">
<input type="text" class="form-control" id="total" name="total" value="" disabled >
</div>
</td>
And this is function onchange
function updateInput(x)
{
var price=parseFloat(document.getElementById('price').value);
document.getElementById('total').value=parseFloat(x)*price;
}
Solved it, just removed disabled attribute and it works.
I'm new to angular.js and i have been having trouble getting form input value.
So i have looked for an answer all over including stackoverflow i could not find any answer.
I want to get the input values using the controller but on each attempt i try i get in the console that its undefined on just using either an object or just text
here is the javascript code:
$scope.url = '';
$scope.user = {
password : '',
repassword : ''
};
$scope.registerUser = function()
{
$log.info($scope.email);
$log.info($scope.user);
}
here is the html code:
<table class="table-responsive">
<tbody>
<form class="form-inline" action="" method="post">
<div class="form-group">
<tr>
<td><label for="email">E-mail</label></td>
<td>
<div class="input-group">
<input type="email" class="form-control" name="email" ng-model="email">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
</div>
</td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" class="form-control" name="password" ng-value="user.password"><td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="Repassword">Reenter Password:</label></td>
<td><input type="password" class="form-control" name="Repassword" ng-value="user.repassword"></td>
</tr>
</div>
<tr><td><input class="btn btn-default" type="button" value="Register" ng-click="registerUser()"></td></tr>
</form>
</tbody>
</table>
You're using ng-value instead of ng-model:
<input type="password" ng-model="user.password">
<input type="password" ng-model="user.repassword">
You might also want to pass in user to your ng-click for convenience and less typing in the function:
ng-click="registerUser(user)"
$scope.registerUser = function(user) {
console.log(user);
}
This is probably not the first question on this topic, but since it took me hours finding out I couldn't find a good solution, I still want to ask you guys here.
I would like to optimize following code, because the page needs a few seconds to load right now. If I take that part out of the page (it is only one part of it), the page loads in max 1 second.
FYI: I only have 4 routes for the student that I test my application with.
<tr ng-repeat="route in student.itin">
<td>
<select ng-options="airline._id as airline.code for airline in ::airlines | orderBy: 'code'" ng-model="route.airline" class="form-control"/>
</td>
<td>
<input type="text" ng-model="route.flight_number" maxlength="4" size="4" class="form-control"/>
</td>
<td>
<input type="text" ng-model="route.class" maxlength="1" size="1" class="form-control"/>
</td>
<td>
<select ng-options="airport._id as airport.code for airport in ::airports | orderBy: 'code'" ng-model="route.departure.airport" class="form-control"/>
</td>
<td>
<div class="form-group has-feedback" ng-class="{'has-error': route.arrival.date < route.departure.date}">
<input type="text" class="form-control" is-open="datepickers['departure_date' + $index]" max-date="route.arrival.date" timepicker-options="timepicker_options" ng-focus="open($event, 'departure_date'+$index)" datetime-picker="{{ ::datetimepicker_format }}" ng-model="route.departure.date" />
<span ng-if="route.arrival.date < route.departure.date" tooltip-placement="right" tooltip="Arrival Date cannot be before Departure Date" tooltip-trigger="mouseenter" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>
</td>
<td>
<select ng-options="airport._id as airport.code for airport in ::airports | orderBy: 'code'" ng-model="route.arrival.airport" class="form-control"/>
</td>
<td>
<div class="form-group has-feedback" ng-class="{'has-error': route.arrival.date < route.departure.date}">
<input type="text" class="form-control" is-open="datepickers['arrival_date' + $index]" min-date="route.departure.date" timepicker-options="timepicker_options" ng-focus="open($event, 'arrival_date'+$index)" datetime-picker="{{ ::datetimepicker_format }}" ng-model="route.arrival.date" />
<span ng-if="route.arrival.date < route.departure.date" tooltip-placement="right" tooltip="Arrival Date cannot be before Departure Date" tooltip-trigger="mouseenter" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>
</td>
<td>
<input type="text" ng-model="route.filekey" class="form-control"/>
</td>
<td class="text-right">
<a class="btn btn-danger" ng-click="deleteRoute($index)" tooltip-placement="top" tooltip="Delete route" tooltip-trigger="mouseenter">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
What I have learned from my research is pretty much that I shouldn't use too much ng-repeat, try to minimize data-binding and filters. But after applying everything I have learned, I came up with the code above and don't know how to go on optimizing, since this is not enough.
Thank you
add track by to your ng-repeat
remove filters where it is possible
use one time binding with ::
Or switch to ReactJS.
Try to improve ng-repeat if your AngularJS is above 1.4.1: https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates
You can try to use sly-repeat directive instead ng-repeat: http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
I want calculate the difference between two dates write in two filed of form page. Below the html code:
<!-- CALENDARIO -->
<script src="js/datetimepicker_css.js"></script>
<!-- CALENDARIO -->
Altro codice html
<tr>
<td width="306" valign="top">
<div class="col-xs-8">
Data inizio<br>
<div class="input-group">
<input type="text" class="form-control" name="data_inizio" id="date_validation1" maxlength="25" size="20"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="javascript:NewCssCal ('date_validation1','yyyyMMdd')" style="cursor:pointer"></span>
</span>
</div>
</div>
</td>
<td width="307" valign="top">
<div class="col-xs-8">
Data fine<br>
<div class="input-group">
<input type="text" class="form-control" name="data_fine" id="date_validation2" maxlength="25" size="20"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" onclick="javascript:NewCssCal ('date_validation2','yyyyMMdd')" style="cursor:pointer"></span>
</span>
</div>
</div>
</td>
<td width="307" valign="top">
<div class="col-xs-8">
Numro giorni<br>
<input type="text" class="form-control" name="numero_giorni"></div>
</td>
</tr>
How to calculate the difference between two dates and write the difference in the filed name="days"?
Thanks
to calculate difference between 2 dates and assign the value to another textbox
<input type="text" id="val1"/>
<input type="text" id="val2"/>
<input type="text" id="val3" />
<script>
function myFun() {
var x2=document.getElementById("val1").value;
var x3=document.getElementById("val2").value;
var msPerDay = 1000*60*60*24;
d1=new Date(x2);
d2=new Date(x3);
var x4=document.getElementById("val3");
var dd=( ((d1 - d2) / msPerDay).toFixed(0)+"days" );
x4.value=dd;
}
</script>
<input type="submit" id="myid" onclick="myFun()" value="get difference"/>
i have a table that generated from yii2, i want to make a tabular input but before sending submit, there are a client validation to the input field. Consider i dont know the input id, because it is generated by yii2. Here's the code snippet of first row
<tr class="kv-tabform-row" data-key="4">
<td class="kv-align-center kv-align-middle">1</td>
<td class="kv-grid-hide kv-align-top">
<div class="form-group field-kegbulan-4-id">
<input type="hidden" id="kegbulan-4-id" class="form-control" name="KegBulan[4][id]" value="4">
<div class="help-block"></div>
</div>
</td>
<td class="kv-grid-hide kv-align-top">
<div class="form-group field-kegbulan-4-id_keg_ta_uk required">
<input type="hidden" id="kegbulan-4-id_keg_ta_uk" class="form-control" name="KegBulan[4][id_keg_ta_uk]" value="6">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-middle" style="width:300px;">Pengadaan Barang Kuasi, Buku Uji, Plat Uji dan Stiker Uji</td>
<td class="kv-align-middle">
<input type="text" id="kegbulan-4-anggaran" class="anggaran" name="KegBulan-[4][anggaran]" value="300,000,000" disabled="disabled" style="width:100px;"></td>
<td class="kv-align-top">
<div class="form-group field-kegbulan-4-sp2d required">
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos()">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-persen_sp2d required">
<input type="text" id="kegbulan-4-persen_sp2d" class="form-control" name="KegBulan[4][persen_sp2d]" value="2">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top">
<div class="form-group field-kegbulan-4-spj required">
<input type="text" id="kegbulan-4-spj" class="form-control" name="KegBulan[4][spj]" value="680000">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-persen_spj required">
<input type="text" id="kegbulan-4-persen_spj" class="form-control" name="KegBulan[4][persen_spj]" value="2">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-target required">
<input type="text" id="kegbulan-4-target" class="form-control" name="KegBulan[4][target]" value="0">
<div class="help-block"></div>
</div>
</td>
<td class="kv-align-top" style="width:70px;">
<div class="form-group field-kegbulan-4-pfisik required">
<input type="text" id="kegbulan-4-pfisik" class="form-control" name="KegBulan[4][pfisik]" value="10">
<div class="help-block"></div>
</div>
</td>
<td class="skip-export kv-align-center kv-align-middle" style="width:60px;"><a href="/yii2/yii-application/frontend/web/keg-bulan/view?id=4" title="View" data-pjax="0">
<span class="glyphicon glyphicon-eye-open"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/update?id=4" title="Update" data-pjax="0" style="display:none;">
<span class="glyphicon glyphicon-pencil"></span></a> <a href="/yii2/yii-application/frontend/web/keg-bulan/delete?id=4" title="Delete" data-confirm="Are you sure to delete this item?" data-method="post" data-pjax="0">
<span class="glyphicon glyphicon-trash"></span></a></td>
<td class="skip-export kv-align-center kv-align-middle kv-row-select" style="width:50px;">
<input type="checkbox" name="selection[]" value="4"></td>
</tr>
screenshoot : http://www.imagebam.com/image/569de2398154258
the input sp2d will check input anggaran and do some validation if (sp2d > anggaran) then "sp2d exceed anggaran limit"
Here the initial javascript function to check that function is triggered via onchange
function tesbos(){
var sp2d = $(".sp2d").attr("id");
console.log(sp2d);
}
when i go to row no 2 in sp2d input, still when i check my console log, it still print the sp2d input id of row #1, how to get my input id automatically/dynamically when i go to any row? any help would be appreciated
Assuming you can change the markup, you need to pass the element refernce to the click handler
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000" onchange="tesbos(this)">
then
function tesbos(el) {
alert(el.id)
}
But I would recommend using jQuery event handlers instead of inlined one, so remove onchange="" from the markup
<input type="text" id="kegbulan-4-sp2d" class="form-control sp2d" name="KegBulan[4][sp2d]" value="680000">
then
jQuery(function($){
$(".sp2d").change(function(){
alert(this.id)
})
})
If I understand correctly, each row of your table includes :
an anggaran (budget) field [fixed value]
a sp2d (spend to date) field [user entered].
And you want to perform a check, on change of every sp2d (spend to date) value against its corresponding anggaran (budget) value.
For this, you do not need to know either of the the fields' IDs. Simply find the anggaran field relative to whichever sp2d field triggers the change event.
First, delete onchange="tesbos()" from the HTML.
Then paste this code between <script></script> tags in your document's HEAD (or in a .js file if your code is organised that way).
jQuery(function($) {
$("#containerID").on('change', ".sp2d", tesbos); // where containerID is the ID of eg. a DIV in which the YII table sits
function tesbos() {
var sp2d_value = $(this).val();
var anggaran_value = $(this).closest("tr").find(".anggaran").val();//find the anggaran field in the same row, and grab its value.
console.log(anggaran_value, sp2d_value);
if(sp2d_value > anggaran_value) {
//anggaran is exceeded
...
} else {
//anggaran is not exceeded
...
}
}
});