I want to parse the following strings in an Input:
<>, <, >, = (without comma)
The Input will be binded by this Snippet:
JS
$scope.json = null;
$scope.filter = JSON.parse(data);
$scope.$watch('filter', function (newValue) {
$scope.json = JSON.stringify(newValue, null, 2);
$scope.output = computed(newValue.group);
}, true);
If I now use:
<input type="text" ng-bind="output"/>
I get the output: <> (for eg for <>)
If I use
<input type="text" ng-bind-html="output"/>
Nothing happens.
Correct would be the <> in the input
Is there an easy way to do this?
Use this filter to parse your operators.
filter("decode",function(){
return function(str){
var el = document.createElement("div");
el.innerHTML = str;
str = el.innerText || el.textContent;
return str;
}
})
Html
<input type="text" ng-bind="model|decode" />
Use the ngModel binding to automatically parse these characters.
<input ng-model="text">
Demo
Related
I have 2 inputs both containing a list of numbers separated by a '|'.
I need to check if any of the ids from the first input exist in the second and if it doesn't add it to a third.
<input type="text" id="access_ids" value="13|16|24|25|31|33|36|42|43|45|48|49|58|59|61|8" /><br />
<input type="text" id="replied_ids" value="8|9|16" /><br />
<input type="text" id="not_replied_ids" value="" />
.
$(document).ready(function(){
var acc_ids = $('#access_ids').text();
var acc_array = acc_ids.split('|');
for (var i = 0; i < acc_array.length; i++) {
if (acc_array[i].indexOf($('#replied_ids')) > -1) {
$('#not_replied_ids').text(acc_array[i].join('|'));
return;
}
}
});
I made a jsfiddle:
https://jsfiddle.net/sheferd/nhj63fbu/1/
Thanks
You are wrong syntax, ex: $('#access_ids').text() --> $('#access_ids').val() ... You can try follow code:
$(document).ready(function(){
var acc_ids = $('#access_ids').val();
var acc_array = acc_ids.split('|');
var not_replied_arr = [];
for (var i = 0; i < acc_array.length; i++) {
if ($('#replied_ids').val().indexOf(acc_array[i]) == -1) {
not_replied_arr.push(acc_array[i]);
$("#not_replied_ids").val(not_replied_arr.join("|"));
return;
}
}
});
Let say I have the following codes:-
<form name="table" ng-submit="createtable()">
<input type="number" ng-model="tab.num" required></input>{{win.numR}}
<button>Save</button>
</form>
I will be adding number in this order(1,2,3,4,5,6). What I want to achieve is e.g.
I have input 1,2, and then when I input 6 it prevents me from adding the 6 because I need to add the 3, the 4 and the 5 before the 6.
thanks for the help.
Here's a full Plunkr to help you out.
http://plnkr.co/edit/1GK1JjFLoCJQd4K3l6eh?p=preview
I am using ui-validate to simplify. I suggest using this module to simplify your validation code.
var application = angular.module("validator", ["ui.validate"]);
application.controller("ValidatorExampleController", ['$scope', function($scope) {
$scope.numberStationValidationFn = function(value) {
if(angular.isUndefined(value)) {
return true;
}
for(var i = 1; i <= value.length; i++) {
if(value[i - 1] != i) {
return false;
}
}
return true;
};
}]);
Add ng-valid attribute to your input and implement a method which will set the input valid to either true or false:
<input type="number" ng-model="tab.num" ng-valid="inputIsValid(tab.num)" required>
In your controller:
$scope.inputIsValid = function(str) {
// check if str is valid and return true or false
}
When an user entering a value, system should check whether this value is within the range of Minimum and Maximum defined for this field. also, need check for number of decimal points allowed.
<input ng-model='data.value1' >
<input ng-model='data.value2' >
<input ng-model='data.value3' >
<input ng-model='data.value4' >
you can add type="number". and for angularJS
<input type="number"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[pattern=""]
[ng-pattern=""]
[ng-change=""]>
Follow the link for more clarification
AngularJs Documentation
Extending My comment:
var range = 'your range';
var checkRange = function () {
var value = data.value;
if(value <=range) {
//your code;
} else {
//your code;
}
}
Update:
$scope.data.value = 500;
$scope.$watch('data.value', function (oldVal,newVal) {
if(newVal > 1000 ) {
$scope.data.value = 500;
}
})
I am using Parsley.js for validating a form submission on a project. One of my needs is to have Parsley require that at least one of three fields have data in them, and only fail validation if none of the three fields has data.
I am not sure from the documentation, how to accomplish this. I already have Parsley validation working on the rest of the form.
You can do that with a custom validator like so
var CheckReccursion = 0;
window.Parsley.addValidator('min3', {
validateString: function (value, requirement, instance) {
var notice =$('#notice').html(' ');
var group = $(requirement);//a class
var FieldsEmpty = 0;
var FieldsNotEmpty = 0;
var count = 0
group.each(function () {
var _val = $(this).val()
var length = _val.length
if (length > 0) {
FieldsNotEmpty++;
}
else {
FieldsEmpty++;
}
count++;
})
var isValid = (FieldsNotEmpty >=1)
//recursively execute
group.each(function (index) {
if (CheckReccursion === index) {
CheckReccursion++;
$(this).parsley().validate();
CheckReccursion = 0;
}
})
return isValid;
}
});
$(function () {
var ok=false;
var notice =$('#notice');
$('#form1').parsley().on('form:validated', function(formInstance) {
ok = formInstance.isValid({force: true});
})
.on('form:submit', function() {
if(!ok){
notice.html('Please fill at least 1 field');
return false;
}
else{
notice.html('okay');
return false;//change to true to submit form here
}
});
});
then add parsley attributes to the group of fields like so:
<form id="form1" data-parsley-validate="true">
<input type="text" name="field1"
data-parsley-min3 = ".group1"
data-parsley-min3-message = "At least 1 must be filled"
class="group1">
<input type="text" name="field2"
data-parsley-min3 = ".group1"
data-parsley-min3-message = "At least 1 must be filled"
class="group1">
<input type="text" name="field3"
data-parsley-min3 = ".group1"
data-parsley-min3-message = "At least 1 must be filled"
class="group1">
<span id="notice"></span>
<input type="submit" value="Submit">
</form>
Check out this fiddle https://jsfiddle.net/xcoL5Lur/6/
My advice is to add hidden checkbox element with the attribute:
data-parsley-mincheck="1"
now just add javascript code that checks the hidden checkbox attribute when your form input has value (and the opposite).
notice that you will need to add extra attribute to your hidden checkbox:
data-parsley-error-message="Please fill at least one input"
Another approach is to using data-parsley-group and the isValid({group,force}) method.
<input type="text" name="input1" data-parsley-group="group1">
<input type="text" name="input2" data-parsley-group="group2">
<input type="text" name="input3" data-parsley-group="group3">
$('#myform').parsley().on('form:validate', function (formInstance) {
if(formInstance.isValid({group: 'group1', force: true}) ||
formInstance.isValid({group: 'group2', force: true}) ||
formInstance.isValid({group: 'group3', force: true})) {
//do nothing
}
else {
$('#errorContainer').html('You must correctly fill at least one of these three groups!');
formInstance.validationResult = false;
}
});
you can add as many as parsley's attributes as you wish, like data-parsley-type="email" that will be validated when the given input is not empty.
we set the force: true because it it forces validation even on non-required.fields.
the html render for the errorContainer is needed because the isValid method does not affect UI nor fires events.
I have a form with parameterized names like
<div id="form-group">
<label>City</label>
<input class="form-control" id="localityGoogle" disabled="true" ng-model="localityGoogle"></input></td>
</div>
<div id="form-group">
<label>State</label>
<input class="form-control" id="administrative_area_level_1Google" disabled="true" ng-model="administrative_area_level_1Google "></input></td>
</div>
In another function I obtain the values to set in the form. I iterate the structure I obtain to set the values
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
addressTypeGoogle = addressType+'Google';
var val = place.address_components[i][componentForm[addressType]];
$scope.addressTypeGoogle = val;
}
}
I want to know if it is possible to access the values in the scope in a way like this
$scope[addressTypeGoogle] = newValue;
Thank you
$scope is just another JS object. So anything you can do with a regular JS object you can do with scope.
$scope.foo = 'bar';
console.log($scope['foo']); //bar
var propName = 'foo';
console.log($scope[propName]); //bar
All of those are valid.