checkbox selected true by using condition - angularjs

I am new to Angular
this is my data
$scope.checkgoogleKeywordIdsData=[
{"AdGroupId":"37446130209","Id":"41941982"},
{"AdGroupId":"34657098157","Id":"1275289507"},
{"AdGroupId":"37446130209","Id":"41941972"}
];
I want ng-checked="true" if '$scope.checkgoogleKeywordIdsData' have 'AdGroupId' and 'Id'
<input type="checkbox"
ng-checked="checkgoogleKeywordIdsData.indexOf({ 'AdGroupId':'34657098157', 'Id': '1275289507' })>-1" />
I am sorry for my English
thank you helping me.

A simple for will do, check below fiddle:
https://jsfiddle.net/twizzlers/mn83go5m/2/
<input type="checkbox" ng-checked="haveIds()" />
$scope.haveIds = function(){
var value = false;
for (var i = 0; i < $scope.checkgoogleKeywordIdsData.length; i++) {
if($scope.checkgoogleKeywordIdsData[i].AdGroupId != null && $scope.checkgoogleKeywordIdsData[i].Id != null){
value = true;
}
}
return value;
}
Hope it helps =)

Instead of condition use indexOf() function.
<input type="checkbox" ng-checked="checkgoogleKeywordIdsData.indexOf({'AdGroupId':'37446130209','Id':'41941982'})"/>

Related

AngularJS: How $Scope function can return another function

i am learning angular. so reading many post and article for angular. this time i do not understand a particular area in code.
code taken from https://stackoverflow.com/a/26741697/728750
<label ng-repeat="fruitName in ['apple', 'orange', 'pear', 'naartjie']">
<input
type="checkbox"
ng-model="fruitsGetterSetterGenerator(fruitName)"
ng-model-options="{ getterSetter: true }"
> {{fruitName}}
</label>
$scope.fruits = ['apple', 'pear']; // pre checked
$scope.fruitsGetterSetterGenerator = function(fruitName){
return function myGetterSetter(nowHasFruit){
if (nowHasFruit !== undefined){
// setter
fruitIndex = $scope.fruits.indexOf(fruit);
didHaveFruit = (fruitIndex !== -1);
mustAdd = (!didHaveFruit && nowHasFruit);
mustDel = (didHaveFruit && !nowHasFruit);
if (mustAdd){
$scope.fruits.push(fruit);
}
if (mustDel){
$scope.fruits.splice(fruitIndex, 1);
}
} else {
//getter
return $scope.user.fruits.indexOf(fruit) !== -1;
}
}
}
do not understand the above code.
the problem lies here. see the code below
$scope.fruitsGetterSetterGenerator = function(fruitName){
return function myGetterSetter(nowHasFruit){}
}
fruitsGetterSetterGenerator is a function and it return another function from it myGetterSetter in it first line this kind of approach or pattern is not clear to me. please help me to understand. thanks

Javascript - Compare 2 input split arrays and output the difference

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;
}
}
});

AngularJS clear validation $error after input's changing

Updated question with fiddle.
Original is here: https://stackoverflow.com/questions/31874313/angularjs-clean-remote-validation-error-after-change-input
In my form I have two validations. First is local, second is remote.
So this is my example
<form ng-controller="MyCtrl" name="Form">
<div class="form-group">
<label class="control-label">
First Name
</label>
<input type="text" class="form-control" name="firstName" ng-model="myModel.firstName" required />
<span class="error" ng-if="Form.firstName.$dirty && Form.firstName.$invalid" ng-repeat="(e, b) in Form.firstName.$error">{{e}}</span>
</div>
<input type="submit" ng-click="submit(Form)">
</form>
Here is Controller
function MyCtrl($scope, $element) {
$scope.submit = function (form) {
if (form.$invalid) {
renderErrors(form);
return;
}
console.log('local validation passed');
// imitation of remote error
// send, then data
if($scope.myModel.firstName === 'Tom')
renderServerErrors({firstName: ['Already in use']}, form);
else
alert('Success');
}
/**
* Errors will appear below each wrong input
*/
var renderErrors = function(form){
var field = null;
for (field in form) {
if (field[0] != '$') {
if (form[field].$pristine) {
form[field].$dirty = true;
}
}
}
};
/**
* Server errors will appear below each wrong input
*/
var renderServerErrors = function(err, form){
var field = null;
_.each(err, function(errors, key) {
_.each(errors, function(e) {
form[key].$dirty = true;
form[key].$setValidity(e, false);
});
});
}
}
http://jsfiddle.net/uwozaof9/6/
If you type 'Tom' into input - you will never submit form more..
And I want to delete server errors from input's error stack on it's change.
Please help!
It seems you only set invalid but don't set valid after it was corrected. IF you are doing yourself you also have to implement setting $valid if the imput is valid.

Submit validation in anjularjs

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
}

Issues with ng-bind-html in an INPUT

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

Resources