I use 2 Inputs to define an age. Both values should be passed to a new input which is alread binded to rule.data. Is that possible? I'm new with angularjs and probably I have a flaw. Thanks for your tips
HTML
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" value="between {{age.from}} and {{age.to}}" />
I do not really understand why you want to use an <input> to format a text with the values of min and max.
You would rather do this, no ?
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<span>between {{age.from}} and {{age.to}}</span>
Does this work for you ?
If the string is just a placeholder for the user age value, you should do this instead :
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" placeholder="between {{age.from}} and {{age.to}}" />
If you need to get the final string into the model, you can do something like this then:
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" ng-init="rule.data = 'between ' + age.from + ' and ' + age.to" />
(I assume you do not have a controller to initialize the model properly.
If you do, then just add this kind of line inside : $scope.rule.data = 'between ' + $scope.age.from + ' and ' + $scope.age.to;. it should do the trick.)
can vary with many solutions, you can add a custom filter at third combined result ,
<input type="text" class="form-control input-sm" ng-model="rule.data | customFilter:age.from:age.to" value="between {{age.from}} and {{age.to}}" />
app.filter('customFilter',function(){
return function(input ,fromage,toage){
//your code for between
return //your calculated age
}
});
Related
<input ng-model="company.title_{{selectedLang}}"
type="text" placeholder="" class="form-control">
I have already try:
<input ng-model="company.title_[selectedLang]"
type="text" placeholder="" class="form-control">
It doesn't work.
Can anyone help me?
<!-- REPLACE this
<input ng-model="company.title_{{selectedLang}}"
type="text" placeholder="" class="form-control">
-->
<!-- WITH this -->
<input ng-model="company['title_'+selectedLang]"
type="text" placeholder="" class="form-control">
How can one input be the same value as another input via angularjs? I know how to do this via jquery but not in angularjs. Here is my code:
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
<script type="text/javascript">
var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('myController', function(){
$scope.input = {
'username': $scope.input.user_code
}
});
</script>
So basically what I want is the first input element to be the same value as the second input element
use ng-blur or ng-change
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-blur="input.username = input.user_code" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
The answer above works, but if you want it to update in real time, just use the same model:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.user_code" name="username" type="text" required>
When you change one of the two, the other will update as well. You can also use this as any other tag. For example, this will show what you type on the <p> tag:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<p> {{ input.user_code }} </p>
In JQuery I can set value for multiple elements at once in this way:
<form action="" id="mainForm">
<input type="text" name="Phone" class="deftext" value="" >
<input type="text" name="Number" class="deftext" value="" >
<input type="text" name="Name" class="deftext" value="" >
<input type="text" name="Lastname" class="deftext" value="" >
<input type="text" name="Middlename" class="deftext" value="" >
<input type="text" name="Age" class="deftext" value="" >
<input type="text" name="Email" class="deftext" value="" >
<input type="text" name="Occupation" class="deftext" value="" >
</form>
$('#mainForm .deftext').val("hello");
// OR
$('#mainForm input:text').val("");
Are there similar approach in ExtJS 4 to modify the following code into single line?
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
Ext.getCmp('mainForm').down('[name=Name]').setValue('');
....
Your JQuery code is not really readable, because when looking at the function you can't see that there are multiple fields affected. This is why ExtJS does not support such a syntax. Either you use
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
or you use
Ext.getCmp('mainForm').getForm().setValues({
Phone: '',
Number: ''
});
Unlike your JQuery example, both of these are readable, because I don't have to know which classes have been applied to which fields.
If you want to reset all fields to the value that was set during the last form.loadRecord operation, or the initial value if no form.loadRecord operation has been performed, use form.reset:
Ext.getCmp('mainForm').getForm().reset();
Well, if child components get something in common (xtype for example) you can do something like
Ext.getCmp('mainForm').query('textfield').each(function(component){component.setValue('')});
but no, you cant use component methods on array of components.
I am using AngularJS JavaScript trying to concatenate two variable in order to generate or use ng-bind-html as I need some dynamic value to be assigned once user clicks on a button. Here are my approach:
$scope.addRow = function(verifier){
$scope.count = 1;
console.log(verifier);
if(!angular.isUndefined(verifier)) {
$scope.row1= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
$scope.row2= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
$scope.row3= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
$scope.row4= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
$scope.row5= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
$scope.row6= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
$scope.row7= $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
}else{
alert('You can not add new line to balance null object');
}
}
It took me a while to understand your need. You need to write like this:
$scope.count = 1;
$scope["row" + $scope.count] = $sce.trustAsHtml('<input type="text" class="form-control" required="required">');
*It is not a question, i share a solution *
I need to access to my FORM from my controller to valid some input accroding to it value ( example, the ISO code should be in my ISO code list ... )
The question is not about how to valid or check the form or input but how to access to form properties ( $valid / $error etc), not to the input value (use ng-model for that )
<form autocomplete="off" name="formLocalisation">
<input type="text" placeholder='countrycode'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-change="validLocalisationField('countrycode')"
ng-model="countrycode" />
<input type="text" placeholder='country name'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countryname"
ng-change="validLocalisationField('countryname')"
ng-model="countryname" />
</form>
Actually there is another way without using $parent:
<form autocomplete="off" name="formLocalisation">
<input type="text" placeholder='Code ISO'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-blur="validLocalisationField(this)"
ng-model="specimen.countrycode" />
</form>
you just have to initialize the form:
$scope.formLocalisation = {};
$scope.validLocalisationField = function (field) {
if ( .... ) {
$scope.formLocalisation[field].$setValidity("countrycode_valid", false);
} else {
$scope.formLocalisation[field].$setValidity("countrycode_valid", true);
}
};
After searchs and headache i share a solution that i found
You need to put $parent in the form name ! :
<form autocomplete="off" name="$parent.formLocalisation">
<input type="text" placeholder='countrycode'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-change="validLocalisationField('countrycode')"
ng-model="countrycode" />
<input type="text" placeholder='country name'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countryname"
ng-change="validLocalisationField('countryname')"
ng-model="countryname" />
</form>
In the controller you can access to the form with $scope.formLocalisation:
$scope.validLocalisationField = function (field) {
if ( .... ) {
$scope.formLocalisation[field].$setValidity(field+"_valid", false);
} else {
$scope.formLocalisation[field].$setValidity(field+"_valid", true);
}
};
source = http://forum.ionicframework.com/t/cant-access-form-on-scope/679/18