I have dynamically added fields on click.
addNewFiled() {
let parent = this;
this.scope.fields.push({
key: 'field-'+parent.scope.fields.length,
type: 'horizontalInput',
templateOptions: {
placeholder :'Enter Field',
label: 'Filed',
required: false
},
validators: {
fieldFormat: function($viewValue, $modelValue, scope) {
let value = $viewValue;
if(value.length != 12){
scope.to.message = "Field should be 12 characters";
return false;
}
return true;
}
}
});
}
What I need is to validate the the value entered is not in another field in the validator, I tried looping through the model but its not efficient, any help is appreciated.
I have encountered this case once, I solved the issue using 2 maps
Basically, you will have 2 maps, one which will contain the index of the field mapped to the value of it, the second map will contain the value of the field mapped to the number of the repetitions of that value
In your validator, you decrement the number of repetitions for the previous value ( after done with other validations) and increase the number of repetitions of the new value and check if it's more than 1 then it's repeated.
In your Dialog define the two maps
private valuesMap: any = [];
private keysArray:any = [];
In your field, you inject a controller to save the index of the current field
controller: function ($scope) {
$scope.index = parent.scope.fields.length-1;
parent.keysArray[$scope.index] = $scope.index;
},
then in your validator
if(value) {
if(angular.isDefined(parent.valuesMap[parent.keysArray[scope.index]])) {
parent.valuesMap[parent.keysArray[scope.index]]= parent.valuesMap[parent.keysArray[scope.index]] -1;
}
parent.keysArray[scope.index] = value;
if(angular.isDefined(parent.valuesMap[value]) && parent.valuesMap[value] > 0) {
parent.valuesMap[value] = parent.valuesMap[value]+1;
scope.to.message = "Value is already entered";
return false;
}
parent.valuesMap[value] = 1;
}
Hope this works with your scenario
You don't need a validator on this, there is already default validation for field length through the minlength and maxlength properties in the templateOptions.
Simply do this:
templateOptions: {
placeholder :'Enter Field',
label: 'Filed',
required: false,
minlength: 12,
maxlength: 12
},
Related
I have a stored procedure that returns dynamic columns and I was able to paint the output with some help on angularJS ui-grid. Now I am trying to add "CellToolTip". Screenshot below is the output of the stored procedure in which columns 25 to 22 are dynamic (which means they can range from 150 to 0 depending on the input given to the stored procedure). The columns that start with "Tgt"are Targets which I don't want to display but show the target value when hovered over the column. I was able to successfully hide the "Tgt-"columns on the webpage with out issue.
Now I need to show them as a CellToolTip when I hover over the dynamic columns 25 to 22 with which I need help. In the screenshot example below when I hover over the cell with value 0.901 that is against column 25 and row "Vat Fill Calc F/P Ratio" attributename I would like to see "0.89". But if I hover over the cell value 0.89 that is against column 25 and row "Vat Batch data F/P" attributename I would like to see "No value" since Tgt-25 column has a NULL for that attributeName.
In my code below within the push function I added "var key = 'Tgt-' + sortedKeysArray[i];
var value = row.entity[key];". When I put break points I get error saying key is undefined. But if I hardcode the key value like "var value = row.entity["Tgt-25"];" then it works fine. I need help with making the hover values dynamic in which I would like to get the target values from their respective target columns. Thanks in advance for the help.
LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {
$scope.error = true;
$scope.errorDescription = "No data found for selected criteria.";
} else {
$scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
data.VatMakeRptList.length
);
var VatMakeRptList = data.VatMakeRptList;
var keysArray = [];
keysArray = Object.keys(VatMakeRptList[0]);
var sortedKeysArray = keysArray.sort().reverse();
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'LineNumber', field: 'LineNumber', width: '20%', visible: true });
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'AttributeName', field: 'AttributeName', width: '20%', visible: true });
for (var i = 0; i < sortedKeysArray.length; i++) {
if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))
$scope.gridOptionsVatMakeRpt.columnDefs.push({
name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
var key = 'Tgt-' + sortedKeysArray[i];
// var value = row.entity["Tgt-25"];
var value = row.entity[key];
if (value != null) {
return value;
} else {
return "No Value";
}
}
});
}
}
All I had to do was move the "Key" value above the if statement.
for (var i = 0; i < sortedKeysArray.length; i++) {
var key = 'Tgt-' + sortedKeysArray[i];
if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))
$scope.gridOptionsVatMakeRpt.columnDefs.push({
name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
// var value = row.entity["Tgt-25"];
var value = row.entity[key];
if (value != null) {
return value;
} else {
return "No Value";
}
}
I'm trying to do a fancy filter on an object that's used in an ng-options.
My ng-options call:
<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes"></select>
And below is the object that's getting passed in.
$scope.ssidTypes = {
"CPE": {
display: "Fixed/CPE",
features: {
CI: false,
SSIDVLAN: true,
CPEVLAN: true
},
intfs: [5],
modes: ["tdma", "csma"],
},
"Hotspot": {
display: "Hotspot",
features: {
CI: true,
SSIDVLAN: true,
CPEVLAN: false
},
intfs: [2, 5],
modes: ['csma']
},
"Trunk": {
display: "Trunk",
features: {
CI: false,
SSIDVLAN: false,
CPEVLAN: false
},
intfs: [5],
modes: ['tdma', 'csma']
}
};
What I'm trying to is filter out options based upon the intfs and modes property of the objects.
Meaning when I have:
$scope.intf = 5;
I would like the options to only be the ones that have 5 in the intf array.
I'm hoping there's some way to do | filter:{something something here} that could magically do this for me.
A simple custom filter should do it, just as you would otherwise return an array for a normal ng-repeat, in your case you should build an object and provide it the properties that pass
.filter('customFilter', function() {
return function(data, intf) {
var result = {}; // new empty object
for (var key in data) {
if (data[key].intfs.indexOf(intf) > -1) { // if number exists in array
result[key] = data[key]; // add property to object
}
}
return result;
}
});
(you will probably want to add type checks and validation to this code)
HTML
<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes | customFilter: currentIntf"></select>
Plunker
You can create a custom filter to achieve this.You can create a
function in your filter which will handle the key based on which you want to filer. Below filter is for intfs and modes key of your object.
Custom Filter:
app.filter('selectedTags', function() {
return function(ssidTypes, filerval) {
var tempArr = [];
angular.forEach(ssidTypes, function(key, val) {
tempArr.push(key);
});
return tempArr.filter(function(value) {
//function to create filter for dynamic keys
function filterValue(parameter) {
for (var i in value[parameter]) {
if (filerval.indexOf(value[parameter][i]) != -1) {
return true;
}
}
}
//pass any key you want in your object
//If you want your object to be filtered based on either of the key
if (filterValue('intfs') || filterValue('modes')) {
return true;
} else
return false;
//If you want your object to be filtered based on both of the key
/* if(filterValue('intfs') && filterValue('modes')) {
return true;
}
else
return false; */
});
};
})
Pass values from your controller. You can pass any combination of the keys you want to filter.
Controller:
$scope.filerval=[2,"csma"];
//$scope.filerval=[2,"tdma"];
//$scope.filerval=[5,"tdma"];
HTML
<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes | selectedTags:filerval"></select>
Working Demo: https://plnkr.co/edit/YFfFHAriMQqfN25Q5Pon?p=preview
I have a editable Uigrid with ui-grid-cellnav directive to enable edit on focus. I also have a filter to display value instead of id in the dropdown.
<div ui-grid="gridOptions" ui-grid-edit ui-grid-cellnav class="grid"></div>
JS
$scope.gridOptions.columnDefs = [
{ name:'name', width:100 },
{ name:'age', width:100},
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%',
cellFilter: "griddropdown:this", editDropdownIdLabel:'id',
editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
{ id: 1, gender: 'male' },
{ id: 2, gender: 'female' }
] }
];
An error occurs whenever the dropdown value is modified. It seems the filter parameter is passed as a string instead of actual object, but not sure why. Works ok if I remove the cellnav directive.
Plnkr
Thanks in advance!
Interesting, I played with it a little bit and it looks like you are getting the desired results, just that occasionally ui-grid likes to pass a string as a parameter instead of the object.
If you add a check for a string in your filter it looks like you will still be getting the desired results, that's if I am understanding properly:
String check to add:
if (typeof context !== 'string') {}
Full Filter:
.filter('griddropdown', function() {
return function (input, context) {
if (typeof context !== 'string') {
var map = context.col.colDef.editDropdownOptionsArray;
var idField = context.col.colDef.editDropdownIdLabel;
var valueField = context.col.colDef.editDropdownValueLabel;
var initial = context.row.entity[context.col.field];
if (typeof map !== "undefined") {
for (var i = 0; i < map.length; i++) {
if (map[i][idField] == input) {
return map[i][valueField];
}
}
} else if (initial) {
return initial;
}
}
return input;
};
});
I have a key value pair defined as below, which is being used for select using ng-options
$scope.BucketEnum = [
{ display: 'Error', value: 0 },
{ display: '1', value: 1 },
{ display: '2', value: 2 },
{ display: '3', value: 3 },
{ display: '4', value: 4 },
{ display: '5', value: 5 },
{ display: 'Flows', value: 125 },
{ display: 'Recovery', value: 151 }
];
I am using this key value pair to display select box in ng-options
<select ng-model="selectedBucket" ng-options="row.value as rows.display for row in BucketEnum" multiple="multiple" ></select>
now if I set ng-model i.e. $scope.selectedBucket = 10, I want to display the text Error. Is it possible to show value Error for all the values which are not there in $scope.BucketEnum array.
NOTE
I am looking at a more generic way to do this e.g a filter for doing this
SCENARIO
There is certain historical data in database, which has some garbage and some good data.
For each garbage value, i need to show the current garbage value as well as the valid values to select from, so for the end users to fix it.
Would this fit your needs ?
jsfiddle
app.filter('bootstrapValues', function(){
return function(initial, baseBucket){
var result = [];
for(var i=0; i<initial.length; i++){
var flag = false;
for(var j=1; j<baseBucket.length; j++){ //from 1 or 0.. you call
if(initial[i] === baseBucket[j].value){
flag = true;
result.push(baseBucket[j]);
break; // if there are repeated elements
}
}
if(!flag)
result.push(baseBucket[0])
}
return result;
};
});
Using it to start the selectedBucket, in your controller:
// setting initials
$scope.selectedBucket = $filter('bootstrapValues')(initialSet, $scope.bucketEnum);
Does it help?
Edit: Here is other jsfiddle with little modifications, if the value is not in the bucket it add the element to the list with Error display and as a selected value.
Using ng-options generates multiple HTML <select> elements for each item in your BucketEnum array and 'returns' the selected value in your ng-model variable: selectedBucket. I think the only way to display the options without an additional blank entry is to ensure the value of selectedBucket is a valid entry in BucketEnum.
Your question states:
if I set ng-model i.e. $scope.selectedBucket = 10, I want to display
the text Error.
I assume you want to display the value: {{BucketEnum[selectedBucket].display}}
So... starting with $scope.selectedBucket = 10, we want some generic way of implementing a select using ng-options which will reset this value to a default.
You could do this by implementing an attribute directive, allowing you to write:
<select ng-model="selectedBucket" select-default="BucketEnum"
ng-options="row.value as row.display for row in BucketEnum"
multiple="multiple">
An example of this approach is shown below. Note that this assumes the default value is zero and does not handle multiple selections (you'd have to iterate over the selections when comparing to each item in BucketEnum and decide what to do if there is a mix of valid and invalid selections).
app.directive("selectDefault",function(){
return{
restrict: 'A',
scope: false,
link:function(scope,element,attrs){
var arr= scope[attrs.selectDefault]; // array from attribute
scope.$watch(attrs.ngModel,function(){
var i, ok=false;
var sel= scope[attrs.ngModel]; // ng-model variable
for( i=0; i<arr.length; i++){ // variable in array ?
if( arr[i].value == sel ) // nasty '==' only for demo
ok= true;
}
if( ! ok )
scope[attrs.ngModel]=0; // set selectedBucket to 0
});
}
};
});
I've run up a jsfiddle of this here
The downside of this is that I've used a $watch on the ng-model which causes side-effects, i.e. any assignment of the named variable will trigger the $watch function.
If this is the sort of solution you were looking for, you could expand the directive in all sorts of ways, for example:
<select ng-model="selectResult"
select-default="99" array="BucketEnum" initial="selectedBucket"
ng-options="row.value as row.display for row in BucketEnum"
multiple="multiple">
...the idea being that the select-default directive would read the default value ("99" here), the array and an initial value then set selectResult accordingly
You would need to code for this explicitly. Scan the choices you want to set against the choices that are present. If you don't find it, select the Error value too.
Note also that you need to pass an array for selectedBucket and it needs to include the actual option objects not just the values inside them.
<div ng-app="myApp">
<div ng-controller="myController">
<p>Select something</p>
<select ng-model="selectedBucket"
ng-options="row as row.display for row in bucketEnum" multiple="multiple">
</select>
</div>
</div>
.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
var initialSet = [1, 5, 10];
$scope.bucketEnum = [
{ display: 'Error', value: 0 },
{ display: '1', value: 1 },
{ display: '2', value: 2 },
{ display: '3', value: 3 },
{ display: '4', value: 4 },
{ display: '5', value: 5 },
{ display: 'Flows', value: 125 },
{ display: 'Recovery', value: 151 }
];
var selected = [];
var error = $scope.bucketEnum[0];
angular.forEach(initialSet, function(item) {
var found;
angular.forEach($scope.bucketEnum, function (e) {
if (+item == +e.value) {
console.log('Found ', e);
found = item;
selected.push(e);
}
});
if (typeof found === 'undefined') {
selected.push(error);
}
$scope.selectedBucket = selected;
console.log(selected);
});
});
i am using kendo ui tree view with check box
i want the check box's id when it is getting unchecked
this is kendo ui mine code
// var homogeneous contains data
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: false,
template:"# if(!item.hasChildren){# <input type='hidden' id='#=item.id#' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' id_a='#= item.id #' name='c_#= item.id #' value='true' />#}else{# <div id='#=item.id#' style='display:none;' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#",
},
dataSource: homogeneous,
dataBound: ondata,
dataTextField: "value"
});
function ondata() {
//alert("databound");
}
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
//console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
});
in this code i am not getting checkbox's id when it is unchecked so i have tried this
jquery code
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});
this code is only working in js fiddle but not in my case http://jsfiddle.net/NPUeL/
if i use this code then i can get the number of count but i dont know how to use it
var treeview = $("[data-role=treeview]").data("kendoTreeView");
treeview.dataSource.bind("change", function (e) {
if (e.field == "checked") {
console.log("Recorded Selected: " + $("[data-role=treeview] :checked").length);
}
});
what changed i need to do in data source so i can get id
thanks in adavance
If you want to get the id you might do:
$('input[type=checkbox]').click(function (e) {
var li = $(e.target).closest("li");
var id = $("input:hidden", li).attr("id");
var node = treeView.dataSource.get(id);
if (node.checked) {
console.log('checked');
} else {
console.log('not checked');
}
});
What I do in the event handler is:
find the closest li element that is the node of the tree that has been clicked.
the id is in an HTML input element that is hidden (this is the way that I understood that you have stored it).
Get item from dataSource using dataSource.get method.
See your code modified and running here
i made the small change and its working now
function ondata() {
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});
}