Angular can't find the variable: data - angularjs

I've already done with my first angular app. I have an error while calling a function.
Here is a snippet of my JSON:
{
"variantA": {
"sumInsuredThirty": [
{
"dayFrom": 1,
"dayTo": 3,
"tarif": 2
}, ...
I've got it via:
$http.get("/CalculatorMed/JSON/rates.json/").then(function(data) {
$scope.rates = data.data;
});
Now, I'm trying to get the tarif:
$scope.getBaseTarif = function () {
var baseTarif = 0;
if (data.pickedOptions.variantA === true && data.pickedOptions.sumInsured === 30000) {
for (var i = 0; i < rates.variantA.sumInsuredThirty.lenght; i++) {
if (data.pickedOptions.days >= rates.variantA.sumInsuredThirty[ i ].dayFrom && data.pickedOptions.days <= rates.variantA.sumInsuredThirty[ i ].dayTo) {
baseTarif = rates.variantA.sumInsuredThirty[ i ].tarif;
return baseTarif;
}
}
}
};
And I have an error:
Error: Can't find variable: data
getBaseTarif#http://localhost:63342/CalculatorMed/controller/calculator.js:34:17
fn
Many thanks in advance!!

data cannot be access outside, it should be $scope.rates,
if ($scope.rates.pickedOptions.variantA === true && $scope.rates.pickedOptions.sumInsured === 30000) {
for (var i = 0; i < rates.variantA.sumInsuredThirty.length; i++) {
if ($scope.rates.pickedOptions.days >= rates.variantA.sumInsuredThirty[i].dayFrom && $scope.rates.pickedOptions.days <= rates.variantA.sumInsuredThirty[i].dayTo) {
baseTarif = rates.variantA.sumInsuredThirty[i].tarif;
return baseTarif;
}
}
}

Related

How can maintain the view in the bottom of the list when I add another element in my infinitescroll list ? angularjs

I have an issue I have a "chat" and when I add a new text in my infinite scroll container,
I go back to the top of the page, i'm not stuck to the bottom.
How can I maintain the page in the bottom of my page while people chat
my service
tabs.factory('chat', function ($http, $timeout, $q) {
return {
default: {
delay: 100
},
data: [],
dataScroll: [],
init: function (data) {
if (this.data.length == 0) {
for (var i = 0; i < data.length; i++) {
this.data[i] = data[i]
}
} else {
var tailleDataSaved = this.data.length
var dataAAjouter = data.slice(tailleDataSaved)
for (var i = 0; i < dataAAjouter.length; i++) {
this.data.push(dataAAjouter[i])
}
}
},
request: function (showAll) {
var self = this;
var deferred = $q.defer();
var index = this.dataScroll.length
var ndDataVisible = 7
var start = index;
var end = index + ndDataVisible - 1;
$timeout(function () {
if (!showAll) {
var item = []
if (start < end) {
for (var i = start; i < end; i++) {
console.log(start)
console.log(end)
console.log(self.data[i])
if (item = self.data[i]) {
self.dataScroll.push(item);
}
}
}
} else {
self.dataScroll = self.data
}
deferred.resolve(self.dataScroll);
}, 0);
return deferred.promise;
}
}
})
my js file
$scope.listChat= function () {
$scope.isActionLoaded = false;
$http.get(apiurl).then(function (response) {
chat.init(response.data)
$scope.isActionLoaded = true
})
}
$scope.listChatInfiniteScroll = function () {
$scope.isScrollDataLoaded = false
ticketListeActionScroll.request(false).then(function (response) {
$scope.actionsInfiniteScroll = response
$scope.isScrollDataLoaded = true
})
}
html file
<div ng-if="isActionLoaded" infinite-scroll='listChatInfiniteScroll ()' infinite-scroll-distance='1'>
<div ng-repeat="chat in actionsInfiniteScroll">
{{chat.text}}
</div>
</div>
Each time I add a new message it calls listChat

tinymce unable to bind correctly nestedmenuitem

I have the following code written and I am not sure why the second level menu items are always the same for each primary level. I know this might be related with scope variables. Can you please suggest an alternative?
``
editor.ui.registry.addMenuButton(insertFields, {
text: My button,
fetch: function (callback) {
var temp = [];
for(var i = 0; i < k.state.ListItems.length; i++)
{
var obj = {};
var fieldItems = k.state.ListItems[i].description;
console.log(fieldItems);
obj["text"] = k.state.ListItems[i].Title;
obj["type"] = "nestedmenuitem";
obj["getSubmenuItems"] = () => {
console.log("fired for submenu");
var getMenuItem = t => {
return {
type: "menuitem",
text: t,
onAction: () => {
editor.insertContent("{{ " + t + "}}");
}
};
};
var nestedItems = [];
for (let k = 0; k < fieldItems.length; k++) {
nestedItems.push(getMenuItem(fieldItems[k].Title ));
}
return nestedItems;
}
temp.push(obj);
console.log(temp);
}
console.log(temp);
var items = temp;
callback(items);
}
});
}
}}
/>
was able to resolve this issue. Not sure if there was a better way.
setup: function (editor) {
for(let i = 0; i < k.state.ListItems.length;i++)
{
// let Fields = k.state.ListItems[i].Fields;
editor.ui.registry.addNestedMenuItem(k.state.ListItems[i].Id, {
text: k.state.ListItems[i].Title,
getSubmenuItems: () => {
var getMenuItem = (t,r) => {
return {
type: "menuitem",
text: t,
onAction: () => {
editor.insertContent("{{" + r +"|" + t + "}}");
}
};
};
var nestedItems = [];
for (let j = 0; j < k.state.ListItems[i].Fields.length; j++) {
// console.log(Fields[j].Title);
nestedItems.push(getMenuItem(k.state.ListItems[i].Fields[j].Title,k.state.ListItems[i].Title));
}
return nestedItems;
}
});
}
}

How to have dynamic rowspan with antd react

I am trying to prepare a table with dynamic rowspan in antd(data will be dynmaic)
I have data like below.
Wanted to display as below. Can you please help ?
[{"col1":"temp1","col2":"1","col3":"x"},
{"col1":"temp1","col2":"1","col3":"y"},
{"col1":"temp1","col2":"2","col3":"z"},
{"col1":"temp2","col2":"3","col3":"a"}];
we can write custom render method to resolve this issue.
sample :
render: (value, row, index) => {
const obj = {
children: value,
props: {},
};
if (index >= this.state.branch_new_index) {
for (let i = 0; index + i !== metrics.length
&& value === metrics[index + i].branch &&
metrics[index].product === metrics[index + i].product; i += 1) {
obj.props.rowSpan = i + 1;
this.state.branch_count = i + 1;
}
this.state.branch_new_index = index + this.state.branch_count;
if (index + 1 >= metrics.length) {
this.state.branch_new_index = 0;
}
} else {
obj.props.rowSpan = 0;
if (index + 1 >= metrics.length) {
this.state.branch_new_index = 0;
}
}
return obj;
},

Accessing the 'caller' property of a function or arguments object is > not allowed in strict mode

I am getting error for following code. Why?
Accessing the 'caller' property of a function or arguments object is
not allowed in strict mode
var _getStudents = function () {
if ($scope.item.ReceivedDate != null) {
dummyService.getByDate('Students/', $scope.item.ReceivedDate).then(function (response) {
$scope.Students = response.data;
}, errorChecker.basic);
}
else {
dummyService.get('Students/').then(function (response) {
$scope.Students = response.data;
}, errorChecker.basic);
}
$scope.Students = $scope.Students.filter(function (student) { return !student.Removed || student.Id == $scope.itemReport.Count[0].ItemID; });
for (var i = 0; i < $scope.itemReport.Runs.length; i++) {
for (var j = 0; j < $scope.Students.length; j++) {
if ($scope.Students[j].Id == $scope.itemReport.Count[i].ItemID) {
$scope.selectedStudents.selected[i] = $scope.Students[j];
break;
}
} // end inner loop
} // outer loop
};
Error is raised by errorChecker.basic of else part.
I have used use strict at the start of my java script file.

How to check if expression will have a value after evaluating

Let's say I have a following template:
"foo['x'] = '{{ myVar }}';"
Is there an angular way of checking if evaluating this against my current scope will give myVar some value ? I've got an array of such small templates and I only want to include them in the document when values are truthy. I was hoping either $interpolate, $parse or $eval might come in handy here. I know for sure that $interpolate is useless. What about the other two ? Maybe it's at least possible to get the name of the assigned value/expression ?
EDIT
I wasn't specific enough. What I was trying to achieve, was checking in advance if for example template '{{ myVar }}' evaluated against the current scope will return an empty string or value of the scope variable (if it exists). The case was really specific - when traversing an array of short templates I wanted to know if a template will return as an empty string or not, and only include it in my final html if it doesn't.
I'm not sure what are you trying to achieve, but to if you want to check if myVar is truthy in current scope, you can:
{{myVar ? "aw yiss" : "nope"}}
Evaluates to "aw yiss" if myVar is truthy and "nope" otherwise.
I ended up with a modified $interpolate provider but maybe someone knows a shorter solution :
app.provider('customInterpolateProvider', [
function $InterpolateProvider() {
var startSymbol = '{{';
var endSymbol = '}}';
this.startSymbol = function(value){
if (value) {
startSymbol = value;
return this;
} else {
return startSymbol;
}
};
this.endSymbol = function(value){
if (value) {
endSymbol = value;
return this;
} else {
return endSymbol;
}
};
this.$get = ['$parse', '$sce', function($parse, $sce) {
var startSymbolLength = startSymbol.length,
endSymbolLength = endSymbol.length;
function $interpolate(text, mustHaveExpression, trustedContext, allOrNothing) {
allOrNothing = !!allOrNothing;
var startIndex,
endIndex,
index = 0,
expressions = [],
parseFns = [],
textLength = text.length,
exp;
var getValue = function (value) {
return trustedContext ?
$sce.getTrusted(trustedContext, value) :
$sce.valueOf(value);
};
var stringify = function (value) {
if (value == null) {
return '';
}
switch (typeof value) {
case 'string':
break;
case 'number':
value = '' + value;
break;
default:
value = angular.toJson(value);
}
return value;
};
var parseStringifyInterceptor = function(value) {
try {
return stringify(getValue(value));
} catch(err) {
console.err(err.toString());
}
};
while(index < textLength) {
if ( ((startIndex = text.indexOf(startSymbol, index)) !== -1) &&
((endIndex = text.indexOf(endSymbol, startIndex + startSymbolLength)) !== -1) ) {
exp = text.substring(startIndex + startSymbolLength, endIndex);
expressions.push(exp);
parseFns.push($parse(exp, parseStringifyInterceptor));
index = endIndex + endSymbolLength;
} else {
break;
}
}
if (!expressions.length && !text.contains(startSymbol) && !text.contains(endSymbol)) {
expressions.push(text);
}
if (!mustHaveExpression) {
var compute = function(values) {
for(var i = 0, ii = expressions.length; i < ii; i++) {
if (allOrNothing && angular.isUndefined(values[i])) {
return;
}
expressions[i] = values[i];
}
return expressions.join('');
};
return angular.extend(function interpolationFn(context) {
var i = 0;
var ii = expressions.length;
var values = new Array(ii);
try {
if (ii && !parseFns.length) {
return expressions[0];
} else {
for (; i < ii; i++) {
values[i] = parseFns[i](context);
}
return compute(values);
}
} catch(err) {
console.err(err.toString());
}
}, {
exp: text,
expressions: expressions,
$$watchDelegate: function (scope, listener, objectEquality) {
var lastValue;
return scope.$watchGroup(parseFns, function interpolateFnWatcher(values, oldValues) {
var currValue = compute(values);
if (angular.isFunction(listener)) {
listener.call(this, currValue, values !== oldValues ? lastValue : currValue, scope);
}
lastValue = currValue;
}, objectEquality);
}
});
}
}
return $interpolate;
}];
}
]);
Lines below were added because in some cases I have a predefined text in my short template and I always want to render it :
if (!expressions.length && !text.contains(startSymbol) && !text.contains(endSymbol)) {
expressions.push(text);
}
if (ii && !parseFns.length) {
return expressions[0];
} else {

Resources