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">
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;
}
Angularjs newbie here..
I have two input boxes,
<input type="text" class="form-control" ng-model="d.d_oad1">
<input type="text" class="form-control" ng-model="d.c_oad1">
then I have
<input type="text" class="form-control" ng-model="d.d_oad2">
<input type="text" class="form-control" ng-model="d.c_oad2">
<input type="text" class="form-control" ng-model="d.d_oad3">
<input type="text" class="form-control" ng-model="d.c_oad3">
and so on...
I need to populate value from the first input box to the next, while keeping the second input box's update independent. For example, I need to populate data from input box with ng-model d.d_oad1 to d.c_oad1, similarly, d.d_oad2 to d.c_oad2 and so on..
It would have been easy if I could use the same ng-model for both, however that is not possible...
So to begin, whatever gets changed in input1 will be stored in variable1(d.d_oad1) and whatever is changed in input2 will get stored in variable2(d.c_oad2), to create the below functionality needed.
First we define an ng-change which runs whenever the ng-modal value changes (i.e. d.d_oad1) and call a function call copy() and pass the value of variable 1(d.d_oad1) to the function.
<input type="text" class="form-control" ng-model="d.d_oad1" ng-change="copy(d.d_oad1)">
So inside this copy function we can write the functionality needed.
Copy functionality:
$scope.copy = function(val) {
$scope.d.c_oad2 = angular.copy(val);
}
Snippet:
Here the copy function will receive the value of variable1 in the first arguement and assign it to the second arguement.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.d = {
d_oad1: "",
c_oad1: "",
d_oad2: "",
c_oad2: "",
d_oad3: "",
c_oad3: ""
}
$scope.copy = function(str, val) {
var key = "c_"+str.split("_")[1];
$scope.d[key] = val;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<input type="text" class="form-control" ng-model="d.d_oad1" ng-change="copy('d.d_oad1', d.d_oad1)"><br>
<input type="text" class="form-control" ng-model="d.c_oad1"><br>
<input type="text" class="form-control" ng-model="d.d_oad2" ng-change="copy('d.d_oad2', d.d_oad2)"><br>
<input type="text" class="form-control" ng-model="d.c_oad2"><br>
<input type="text" class="form-control" ng-model="d.d_oad3" ng-change="copy('d.d_oad3', d.d_oad3)"><br>
<input type="text" class="form-control" ng-model="d.c_oad3">
</div>
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.
I am trying to do some math with user inputs.
I have this basic objets to start with
$scope.shape =
{id: 1, cx: 0, cy: 0, result: 0}
;
And the user can type the value of cx and cy into fields;
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
I want to multiply the 2 values cx and cy and show the result in another input.
<input type="text" class="form-control" id="A" ng-model="shape.cx * shape.cy">
This is working, I can see the the result in the field but I get an error;
Error: [ngModel:nonassign]
I would also like to asign this result to shape.result.
How can I set the value of shape.result to be shape.cx*shape.cy
See here it could be done like this :
SCENARIO 1 : Result on Button Click : (Procedural Approach)
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="button" class="form-control" ng-click="calculate()">
<input type="text" class="form-control" id="A" ng-model="shape.result">
$scope.calculate = function(){
$scope.shape.result = parseInt($scope.shape.cx) * parseInt($scope.shape.cy);
}
SCENARIO 2 : As soon as Value Changes in text boxes : (Direct Approach)
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="text" class="form-control" id="A" ng-model="parseInt(shape.cx) * parseInt(shape.cy)">
SCENARIO 3 : Using $watch : (Procedural Approach)
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
<input type="text" class="form-control" id="A" ng-model="shape.result">
$scope.$watch(function (){
$scope.shape.result = parseInt($scope.shape.cx) * parseInt($scope.shape.cy);
});
Note :
Scenario 3 is using $watch hence it should be not used untill and unless you're in real need of it.
Scenario 1 is best suited to you I think as it will make your concept.
Scenario 2 is a direct approach hence should be used after gaining some knowledge as well as experience(But it's short & best within 3 scenatios). It's a reference from #tapos answer
Thanks & Cheers
Well you need to watch for cy and cx changes and do the calculation when it change.
$scope.$watch('shape.cx', function() {
$scope.shape.result = $scope.shape.cx * $scope.shape.cy;
});
Example fiddle: http://jsfiddle.net/ccmf07k2/
Every language input field is string when a user enter any number in text box it is string
<input ng-model="shape.cx" type="text" class="form-control" id="cx">
<input ng-model="shape.cy" type="text" class="form-control" id="cy">
so you need some work in your result box ix
<input type="text" class="form-control" id="A" ng-model="parseInt(shape.cx) * parseInt(shape.cy)">
then you get your appropriate result
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.