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">');
Related
I've 3 input fields the first field is of type select and the remaining two are of type text. Now if I select a value from dropdown list, then the corresponding values should appear in the remaining two input fields. How to do it in AngularJS. Thank you!
For example if I select User1 from the dropdown then User1 corresponding email & phone number should appear in the corresponding input fields.
NOTE: the values are fetched from the database based on the selected option
<select>
<option value="user1">User1</option>
<option value="user2">User2</option>
<option value="user3">User3</option>
<option value="user4">User4</option>
</select>
<input type="text" id="eamil" placeholder="Email">
<input type="text" id="phone_no" placeholder="Phone number">
<select ng-options="s as s in Users" ng-model="user" ng-change = "GetData(user)">
<input type="text" id="eamil" placeholder="Email" ng-model="userEmail">
<input type="text" id="phone_no" placeholder="Phone number" ng-model="userPhone">
Now on controller
$scope.GetData = function(user){
// Here Please add Code to fetch the data from database. Here userEmailFromDB and userPhoneFromDB are the values that you get from database.
$scope.userEmail = userEmailFromDB;
$scope.userPhone = userPhoneFromDB;
}
$scope.userListSelected = function(userList){ $scope.email = userList.email; $scope.phoneNumber = userList.phoneNumber;
<select ng-model="userList" ng-options="user.name for user in userData" ng-change="userListSelected(userList)">
<input type=text ng-model="email" />
<input type=text ng-model="phoneNumber"/>
I have something like this, may it helps:
$scope.onChangeSelectedUser = function(item) {
$scope.user.user_id = item.id;
}
$scope.selectedUser = [];
<select class="form-control with-search" select-picker data-live-search="true" title="Select User" ng-model="selectedUser"
ng-options="u as u.email for u in users"
ng-change="onChangeSelectedUser(selectedUser)">
</select>
<input type="text" readonly class="form-control" ng-model="selectedUser.user_id"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.email"/>
<input type="text" readonly class="form-control" ng-model="selectedUser.phone_no"/>
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>
*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
How to get dynamic array input value in angularjs .i want to collect all values of input in angular js function and retun from function so that the return value can be displayed any where in the page .Is it possible because it is possible in php that if i submit form with array of input like $cat in this case ,and can be displayed anywhere in the page .
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat" >
In your controller $scope.cat = ["a","b","c","d"]
and in your view:
<input type="text" name="cat[]" ng-model="cat[0]">
<input type="text" name="cat[]" ng-model="cat[1]">
<input type="text" name="cat[]" ng-model="cat[2]">
<input type="text" name="cat[]" ng-model="cat[3]">
or dynamic with ng-repeat
<div ng-repeat="c in cat">
<input type="text" value="{{c}}" ng-model="cat[$index]">
</div>
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
}
});