why I am getting undefined value in angular js - angularjs

could you please tell me why I am getting undefined value .When I click on chart ? I make one bar chart and try to get it value .In other words try to get selected item and it’s value .
In give fiddle it gives correct value
http://jsfiddle.net/b4n9z19v/
But when I make directive and try to get it value it is giving me undefined why ?
here is code
http://plnkr.co/edit/FtDfeyd6fjHL3RNwzyCn?p=preview
$scope.chartObj = new Highcharts.Chart($scope.chartData);
$element.bind('click', function (event) {
// do your code
alert( $scope.chartData.chart.type);
alert('Category: ' + this.category + ', value: ' + this.y);
});

Why don't you add click event to the chart object, in a similar way as you did for data.json? Like this:
$scope.chartData.plotOptions.series.point.events.click = function (event) {
// do your code
alert( $scope.chartData.chart.type);
alert('Category: ' + this.category + ', value: ' + this.y);
};
See plunker: http://plnkr.co/edit/WA4TcDuoer3ix08T15QM?p=preview

Related

Show textareas values in parent component as a list & not showing tabs on page load

I created a form with Angular Material, inside the form I have a mat-radio-group for radio buttons, and mat-tab-group
For tabs, each one of this tabs have an input. I have two questions.
1 - The tab group doesn’t show when the page loads, I have to click in a radio button to see the tabs, I don’t know why this is happening.
2 - I am getting the values from the textareas and I am showing them in the parent component, When I write a new value in the text area, this one replace the previous value, but I need all the values from the different textareas.
1st issue - not able to see tabs on reload/load
actually, as per the code, we are getting console errors, and because of that, we are not able to see tabs. it is breaking at the radio group itself.
console errors
Fix for the above issue - remove the formControlName="titleAction" for each radio button.
2nd issue - not getting all tabs data in a parent from child comp
so... here you are not sending all tabs data. that is the actual issue.
I did a few changes in child and parent as per your expected result.
sending array from child like below
submit() {
this.updateDataEvent.emit({formdata:this.form.getRawValue(), tabs: this.tabs});
}
and changed code in the parent component while updating a few global variables
updateData(selection: any): void {
this.titleScreening =
selection.formdata.titleAction === 'change'
? selection.formdata.titleText
: 'Original Title';
//Empty Inputs
if (this.titleScreening === '') {
this.titleScreening = 'Original Title';
}
this.divTag = this.divTag2 = ''
selection.tabs.forEach((x) => {
// this.name = x.fullName;
var appendElement = '<li> <span> Name </span>' + x.name + '</li>';
this.divTag = this.divTag + appendElement;
// Show in parent component
var appendElement2 = '<li> Value: ' + x.value + '</li>';
this.divTag2 = this.divTag2 + appendElement2;
});
// selection.fullName === ''
// ? (this.divTag = '')
// : (this.divTag = appendElement);
}
stackblitz

data does not appear in the ui grid

I'm trying to populate Angularjs UI grid, when geocoder.geocode of google map executes, the UI grid populated..but nothing its appears ine the navigator until i click something on the DOM then the data appears in the UI grid..why it behaves like that???
geocoder.geocode({'location': latlng}, function(results, status) {
//console.log("vb");
$scope.cp++;
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
console.log('azerty: ' + JSON.stringify($scope.aqw[index]) );
$scope.aqw[index].adress=results[1].formatted_address;
if($scope.cp == $scope.Mylength){
//alert(JSON.stringify($scope.aqw));
$scope.gridOptions.data=$scope.aqw;
}
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
//console.log("vbbbb");
$scope.varr=results[1].formatted_address;
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
//alert("kl");
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
$scope.titi="djdjd";
// console.log( $scope.varr+' '+'cccccccccccccccccccccccccccccc');
console.log('azertym: ' + JSON.stringify($scope.aqw[index]) );
$scope.myData={};
$scope.myData+=$scope.aqw[index];
console.log('yoyoyoyo: ' + JSON.stringify($scope.aqw));
});
Im assuming it is because of the digest cycle, the scope isn't aware of the changes and there for it is not updating the dom.
you can include a $scope.$apply() at the end of the callback function. and this will fix the issue...
read more about digest and apply here: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Get text of input in Protractor

How do I get text of input and use it in my test? The code bellow returs an Protractor Object and not the text.
var typed = element(by.css(css + ' input')).getAttribute('value');
if (typed === 'something') { // doSomething() }
The function getAttribute returns a promise. To access the value you can do so in a then calback
element(by.css(css + ' input')).getAttribute('value').then(function(value) {
console.log(value);
});
You don't mention what you need it for, but note that expect can handle promises passed to it, so for a lot of cases you don't need the then callback.
expect(element(by.css(css + ' input')).getAttribute('value')).toEqual('some-value');

Value of selected country amcharts

When I select country on map, how can I get a value of this country and pass it to variable? Thanks a lot! I used amcharts.com
Or it can be another solution? I you know how to choose country on map, i'll be very grateful!
You can use "clickMapObject" event to catch all the information about clicked object. I.e.:
map.addListener("clickMapObject", function (event) {
alert( 'Clicked ID: ' + event.mapObject.id + ' (' + event.mapObject.title + ')' );
});
Here's a working example:
http://jsfiddle.net/amcharts/k67gB/light/
Please note that in order for this event to fire the country needs to be clickable. This means that either "autoZoom" needs to be enabled or all areas need to be set as "selectable":
var map = AmCharts.makeChart("mapdiv",{
...
"areasSettings": {
"autoZoom": true
}
});
Or
var map = AmCharts.makeChart("mapdiv",{
...
"areasSettings": {
"selectable": true
}
});

Watching a value service value?

I have this in my Angular app:
myApp.value(mySetting, mySettingValue);
Is it possible to $watch() mySetting for changes? I've tried but can't get it to work.
This doesn't seem to do the trick:
$rootScope.$watch(function() {
return mySetting;
, function(newSettingValue) {
console.log(Date.now() + ' ' + newSettingValue);
});
You missed to true property as a 3rd parameter inside your $watch, adding true will keep deep watch on object
Code
$rootScope.$watch(function() {
return mySetting;
, function(newSettingValue) {
console.log(Date.now() + ' ' + newSettingValue);
}, true);
Example Plunkr

Resources