I tried to set up data-minute-step={{somevalue}} but if I change the value, it doesn't update the picker. Can I do something about it?
Example:
<input type="number" ng-model="stepSize">
<input bs-timepicker data-minute-step="{{stepSize}}">
This is what I have:
<input id="timetable.amountPerLeson"
class="form-control"
type="number"
step="15"
placeholder="45 min"
ng-model="durationStep">
<input id="timetable.start"
class="form-control"
type="text"
placeholder="date"
ng-model="slot.startHour"
bs-timepicker
data-time-format="HH:mm"
data-length="1"
data-minute-step="{{durationStep}}"
data-arrow-behavior="picker"
ng-show="slot.name === 'Hours'" >
I took a look on the source code and it doesn't seem to watch changes on the attributes - They are evaluated only once, so that's why chaning the data-minute-step via input doens't work.
The workaround I can suggest is to force rendering the timepicker element, when you update the minutes steps:
<input id="timetable.amountPerLeson" class="form-control" type="number" step="15" placeholder="45 min"
ng-model="durationStep" ng-change="minutesUpdated()">
<input id="timetable.start" class="form-control" type="text" placeholder="date"
ng-model="slot.startHour"
bs-timepicker data-time-format="HH:mm" data-length="1" ng-attr-data-minute-step="{{durationStep}}"
data-arrow-behavior="picker" ng-show="slot.name === 'Hours'" ng-if="!renderTimePicker">
Add the render function to the controller (Make sure you inject $timeout):
$scope.minutesUpdated = function() {
$scope.renderTimePicker = true;
$timeout(function() {
$scope.renderTimePicker = false;
});
};
Changing the minutes step from the view will trigger the $scope.minutesUpdated() function, it will remove the timepicker from the view (Because I added ng-if="!renderTimePicker" to the element), and bring it back again after the view has rendered (By resetting $scope.renderTimePicker = false; inside the $timeout).
Please note that I changed the data-minute-step to ng-attr-data-minute-step because I think it will make it work.
Related
I have a method that is toggling between two inputs.
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
}
<a ng-click="$ctrl.toggleModToLod(configurableOption)" ng-init="">MOD or LOD</a>
<input ng-if="configurableOption.isModField" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="!configurableOption.isModField" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
It works fine, but if i had before filled the MOD field and after that i changed to LOD field the request contain both values, is there any way to have in my request only the selected value from the selected input ?
You can make the switch a toggle or checkbox or other form element
<label><input type='radio' ng-model="value.which" value='MOD' /> MOD</label>
<label><input type='radio' ng-model="value.which" value='LOD' /> LOD</label>
<input ng-if="value.which=='MOD'" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="value.which=='LOD'" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
Then when you send your request, you'll have the which variable which will tell you which value to use. Additionally, you'll have a built in switcher that will automatically work by setting value.which
just clear both values from model everytime you toggle:
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
$scope.value.mod = undefined; // however you're setting these on the controller / directive
$scope.value.lod = undefined;
}
Trying to figure out form related angular technique. Im new to angularjs and started digging deep into it.
Well im trying to get current and permanent address in a form. When the "same as current" checkbox is checked then value of current address field is written in permanent address field ng-value.
While permanent address field is typed first and then we checked "same as current" not overwriting field from current address ng-value.
Current Address field
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="current_address_line1" ng-model="contacts.current_address_line1" placeholder="House Number">
checkbox :
<input type="checkbox" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
Permenent Address :
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" ng-value="contacts.current_address_line1" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" ng-if="!sameascurrent" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Any help would be appreciated.
http://plnkr.co/edit/rX3iT5lX2JEIArvxL8SK?p=preview
Move overwriting logic to controller. For permanent address use similar inputs as for current (no ng-value only ng-model) plus ng-disabled.
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line2" ng-model="contacts.permenent_address_line2" ng-disabled="sameascurrent" placeholder="Street Name">
Add ng-change to checkbox input:
<input type="checkbox" ng-change="change()" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
and function called when checkbox is changed in controller. This function overwrites model of permanent address if sameascurrent is true.
$scope.change = function () {
if ($scope.sameascurrent) {
$scope.contacts.permenent_address_line1 = $scope.contacts.current_address_line1;
$scope.contacts.permenent_address_line2 = $scope.contacts.current_address_line2;
}
}
See http://plnkr.co/edit/aEuG62gaUh5U4Xl5ZUTv?p=preview
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" !!ng-value="contacts.current_address_line1"!! name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Remove ng-value from input. Ng-value is used to set values like objects to the radio box or smth like this.
UPD: Just remember. When you are using ng-model, this means that value from input will be dynamicly set to the your model. So you can bind it from model to anywhere you wont
ng-value just set the filed once, for realtime data clone,you can write your own $watch method inside the controller:
function sync(){
if($scope.sameascurrent){
var contacts = $scope.contacts;
contacts.permenent_address_line1 = contacts.current_address_line1;
contacts.permenent_address_line2 = contacts.current_address_line2;
}
}
$scope.$watch('contacts',sync,true);
$scope.$watch('sameascurrent',sync);
http://plnkr.co/edit/EPoprBLeNxlwDlklWuiC?p=preview
For more detail on $watch, you can refer angular docs for $scope
I have a datetimepicker.
Overall, it works fine and updates the text box fine. However, when I place a ng-model onto the input field, nothing gets passed through to the binding at the bottom of the page.
Here!s the form I'm using :
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' ng-model="package.timeA" value="" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
This is my JS code :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
For the input box give some id or class name then initialize datepicker with that id or class
<input type='text' ng-model="package.timeA" value="" class="mydatePicker form-control" />
$('.mydatePicker ').datetimepicker();
It will work.
You can try to use $apply who allow to force reload of the variable and $setViewValue who allow to set the variable of the view.
add ng-change on your input tag and pass the date.
In your controller you can make a function like this:
$scope.onChange = function(package.timeA)
{
$scope.$apply(function (){
YourCtrl.$setViewValue(package.timeA)
}
}
I have an array of persons, each one should have phone and name,
so I did :
<div ng-repeat="a in arr">
<ng-form>
phone{{a}}:<input type="phone" name="phone" />
text{{a}}:<input type="text" name="name" />
</ng-form>
</div>
When finish to enter phone and name for the first person, I want to call "doSomething" function .
What is the best way to do that? I prefer to not use watch.
Here is a plunker for example.
I'd suggest you to use ng-blur in your case. Using ng-keyup will trigger the function on every key release event, which is not good at all. You should check below example example how it works
phone{{a}}:<input type="phone" data-ng-blur="doSomething();" name="phone" />
I've updated your fiddle to check more.
EDIT
If you only want to execute for the first iteration then you should pass index to your function and check if its equals to 0. Then it must be for first iteration. like
ng-blur="doSomething($index)"
In your function
$scope.doSomething = function(index){
if(index === 0)
alert("finish");
};
one of the ways to achieve this is
<input type="phone" name="phone" ng-model="input.phone" ng-change="onchange()"/>
<input type="text" name="name" ng-model="input.name" ng-change="onchange()"//>
and then on your scope
scope.input = {};
scope.onchange = function(){
if(!input.phone) return;
if(!input.name) return;
//other logic
}
btw, best practises says always have a dot in your ng-model
Probably, you're looking for the following.
HTML
<div ng-repeat="a in arr">
<ng-form>
phone{{a}}:<input type="phone" name="phone" ng-change="doSomething()" />
text{{a}}:<input type="text" name="name" ng-change="doSomething()"/>
</ng-form>
</div>
Controller:
$scope.doSomething= function () {
// do something
};
Note: You can also use ng-blur that will be triggered only once you leave focus from input field.
I have an ng-repeat with each row having multiple UI-Bootstrap Datepickers. I am trying to call a function in my controller when the date is selected and the picker closes. I have tried using UI-Event to capture the blur event but the model hasn't been updated when this gets called. My question is how can I get the selected date when the picker closes? Can I do something like ui-event="{ blur : 'myBlurFunction( $event, this.text)' }, or is there another way to get the data with an onClose event?
<li ng-repeat="....">
<div ng-click="openEditStartCal($event, ticket)">
<input ui-event="{ blur : 'blurredStartDate( $event, ticket, this.text)' }"
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="ticket.StartDate"
is-open="startEditTicketOpened && currentTicketUpdating == ticket.TicketId"
min-date="{{today()}}"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
</div>
I have solved this by using: ng-change="myChangeFunction()".
This is possible using ng-change :
html/jsp file
<input type="text"
id="StartDate"
name="StartDate"
class="form-control input-sm"
uib-datepicker-popup="{{format}}"
ng-model="StartDateVal"
is-open="status.opened"
min-date="min"
max-date="max"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
readonly="true"
ng-change="select(StartDateVal)" />
.js Controller
$scope.select = function(date) {
// here you will get updated date
};
You can put a $watch in your controller for your date variable.
$scope.$watch('ticket.StartDate',function(){
var date = $scope.ticket.StartDate;
});
I was dealing with this as well and onChange won't do the job for me, so I went to ui bootstrap .js and added some things. Then I can set a function to be called in HTML via on-close attribute.
<input type="text" on-close="dateClosed()" ng-model="date" datepicker-popup="dd.MM.yyyy" is-open="dateOpened" ng-click="dateOpened=true" />
then you need to change the ui-bootstrap.js at
.directive('datepickerPopup' ... function(...) ... return { ...
scope: { ... , onClose: '&' }
there are 3 options how to close the picker - date selection, click elsewhere or done button. you can find it easily, its the only place where isOpen is set to false
scope.isOpen = false;
Then i just call a function at those 3 places, where i call the function from the attribute
scope.onClosing = function () {
if (angular.isDefined(attrs.onClose))
scope.onClose();
}
If you want the ui-bootstrap.js PM me, I did it in the tpls version only tho.