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;
}
Related
new in angular here.
I have an input field disabled base on the radio button, if the radio button was selected, I first want the input field value to null and then disabled it.
Here is my current example:
<input type="radio" ng-model="vm.radio" value="selected" /> Sample
<input type="text" ng-model="vm.input" ng-disabled="vm.radio='selected'" />
When input have the value, it just disabled and keep the input value.
I can do check inside the controller like
if(vm.radio=='selected') { vm.input = null }
But it only work when I active the function via the button. Is there any good way to handle it at HTML page, on the change event? Not in a controller script.
take a look at this plnkr: https://plnkr.co/edit/IygRaPlBmLzdnI0jhAQn?p=preview
You can use ng-change specifying an expression
<input type="radio" ng-model="vm.radio" value="selected" ng-change="vm.radio === 'selected' ? vm.input = '' : '' " /> Sample
<input type="radio" ng-model="vm.radio" value="b" /> Sample2
<input type="text" ng-model="vm.input" ng-disabled="vm.radio === 'selected'" />
Following this bit of code:
<label class="checkbox-label">
<input name="radio1" type="radio"
ng-model="myModel.radio"
required ng-required="true"
value="1">
</label>
<label class="checkbox-label">
<input name="radio1" type="radio"
ng-model="myModel.radio"
required ng-required="true"
value="2">
</label>
<input type="number" name="result" class="form-control input-sm" ng-model="myModel.result"
required ng-required="true" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.1" min="0" max="100">
i need to set the ng-pattern & step to accept one decimal place (0.1) or two decimal places (0.01) based on the radio1 selection
Anyone has an idea how to approach this?
UPDATE
I have created a directive to do this, but validation is not triggered after changing the pattern (Angular 1.2)
app.directive('stepChange', function () {
return {
link: function link(scope, element, attr) {
element.bind('change', function () {
var el = angular.element(attr['target']);
el.attr('step', attr['step']);
el.attr('pattern', attr['pattern']);
el.val(attr['val']);
el.trigger();
});
}
}
});
You should write custom implementation for step and pattern to work dynamically.
For Reference
How to customize the step of a number input field?
HTML5 input type=number change step behavior
The key to doing this is :
Apply watch on model used in radio.
Change step value in above watch and assign it back using scope variable
$scope.$watch('myModel.radio',function(a,b){
debugger
if(a ==1){
$scope.step = "0.1";
}else if(a==2){
$scope.step = "0.01";
}
});
Please apply the step logic/values yourself in plunkr.
https://plnkr.co/edit/BKTS5jDTRoRQomNzHSt2?p=preview
You can also make the ng-pattern dynamic the same way(like step)
<input type="number" name="result" class="form-control input-sm"
ng-model="myModel.result" required ng-required="true"
ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step={{step}} min="0" max="100">
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.
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
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>