I made a custom accordion template like so :
<div class="left_pane" ng-style="{height : mapStyle.height-82+'px'}">
<div class="accord_main_wrap">
<div class="accord_item_wrap" ng-repeat="head in heads">
<p class="accord_head" data-notvisible="true">{{head.text}}</p>
<div class="accord_content_wrap">
<ul>
<li ng-model="sub.text" ng-repeat="sub in head.subs">
<label>
<input type="checkbox" ng-model="sub.isChecked"/>
<span class="accordSubs">{{sub.text}}</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
I have a model which has states of the checkbox.
The problem is that the first checkbox gets updated / toggles (true/false) when the user clicks anywhere on the page.
This behavior is only seen in IE9.
IE9 above are ok, FF and Chrome are ok.
I am at my wits end, Really need help.
EDIT : Accompanying Model
[{
"id": "3",
"text": "Main Title One",
"subs": [{
"id": "5",
"text": "Sub Title One",
"isChecked": false,
"headId": "3",
"headTitle": "Main Title One",
"$$hashKey": "00E"
},
{
"id": "6",
"text": "Main Title One",
"isChecked": false,
"headId": "3",
"headTitle": "Sub Title Two",
"$$hashKey": "00F"
}],
"$$hashKey": "004"
},
{
"id": "4",
"text": "Main Title Two",
"subs": [{
"id": "7",
"text": "Sub Title One",
"isChecked": false,
"headId": "4",
"headTitle": "Main Title Two",
"$$hashKey": "00A"
},
{
"id": "9",
"text": "Sub Title Two",
"isChecked": false,
"headId": "4",
"headTitle": "Main Title Two",
"$$hashKey": "00B"
}],
"$$hashKey": "005"
}]
Related
EDIT:
Now I am getting the data properly by adding an *ngIf condition for graph component. But, the chart getting rendered, not getting any fill color. The fill URL getting is
fill="url('http://localhost:4200/#rr-1272-xr___89_110_110__rgba_118_193_134_0.9__78-rgba_118_193_134_0.9__89')"
OLD:(Found solution)
In my application, the Fusioncharts graphs are not rendering when the tab is not active. Even when the tab comes to active, the graphs are not rendering. Showing No data to display message as follows
HTML:
<section class="">
<!-- fusion chart starts here -->
<fusioncharts width="220" height="220" type="doughnut2d"
[dataSource]="dataSource" dataFormat="json" SVGDefinitionURL='absolute'>
</fusioncharts>
<!-- fusion chart ends here -->
</section>
Component:
let xyz = {
chart: {
"bgColor": "#ffffff",
"startingAngle": "310",
"showLegend": "0",
"defaultCenterLabel": this.returnValue(this.chartData) + "\n" + "Total",
// "centerLabel": "$value" + "\n" + "$label",
"centerLabelBold": "0",
"showTooltip": "0",
"theme": "fusion",
"minAngleForValue": "75",
"enablesmartLabel": "0",
"showLabels": "0",
"showValues": "0",
"enableMultiSlicing": "0",
"showBorder": "0",
"showPlotBorder": "1",
"plotBorderColor": "#ffffff",
"plotBorderThickness": "5",
// "legendPosition": "RIGHT",
"doughnutRadius": "70",
"paletteColors": "#6C7DED,#3CA653,#FFAB27,#3AC9E9,#6C7DED,#0C8455,#FDCF12,#76E4FC",
"animateClockwise": "0",
"chartLeftMargin": "0",
"chartRightMargin": "0",
"chartTopMargin": "0",
"chartBottomMargin": "0",
"captionPadding": "0",
"slicingDistance": "0",
"plotHoverEffect": "1",
"centerLabelFontSize": "20",
"centerLabelFont": "DroidSans",
"centerLabelColor": "#222222",
},
data: [
{
"label": "Pilot",
"id": "Pilot",
"value": 5,
"color": "#3CA653",
"link": "studies?studies-by-phase=Pilot"
},
{
"label": "Pivotal",
"id": "Pivotal",
"value": 2,
"color": "#FFAB27",
"link": "studies?studies-by-phase=Pivotal"
},
{
"label": "Phase 1",
"id": "Phase 1",
"value": 4,
"color": "#3AC9E9",
"link": "studies?studies-by-phase=Phase 1"
},
{
"label": "Phase 2",
"id": "Phase 2",
"value": 3,
"color": "#6C7DED",
"link": "studies?studies-by-phase=Phase 2"
}
]
};
this.dataSource = { ...xyz };
Please help me solve this issue.
Thank you...
In the module.ts file add SVGDefinitionURL as absolute instead of adding in component.html
FusionCharts.options['SVGDefinitionURL'] = absolute;
I make a call to an API which returns data like this
[
{
"id": 9,
"name": "Past Menu",
"serveDate": "2019-05-08 00:00:00",
"meals": [
{
"id": 27,
"name": "6",
"description": "6",
"image": "",
"mealType": "BREAKFAST",
"unitPrice": 6,
"status": "ENABLED"
},
{
"id": 28,
"name": "7",
"description": "7",
"image": "",
"mealType": "BREAKFAST",
"unitPrice": 7,
"status": "ENABLED"
},
{
"id": 30,
"name": "9",
"description": "9",
"image": "",
"mealType": "BREAKFAST",
"unitPrice": 9,
"status": "ENABLED"
}
]
},
{
"id": 8,
"name": "Bomb Menu",
"serveDate": "2019-05-10 00:00:00",
"meals": [
{
"id": 28,
"name": "7",
"description": "7",
"image": "",
"mealType": "BREAKFAST",
"unitPrice": 7,
"status": "ENABLED"
},
{
"id": 30,
"name": "9",
"description": "9",
"image": "",
"mealType": "BREAKFAST",
"unitPrice": 9,
"status": "ENABLED"
},
{
"id": 31,
"name": "10",
"description": "10",
"image": "",
"mealType": "BREAKFAST",
"unitPrice": 10,
"status": "ENABLED"
}
]
}
]
Each parent object also has a child object (meals) and a user can choose to delete any of the child objects (meals) and when that action is called it should be able to get the parent id as well. An example is when the meal object of id 27 is selected to be deleted, I should be able get the parent id which is 9
HTML
<div *ngFor="let item of menuList">
<h2>Menu</h2>
{{item.name}} - {{item.servedate}}
<h2>Meals</h2>
<div *ngFor="let item of item.meals">
<span (click)="removeMeal(item)">{{item.name}} - {{item.mealType}}</span>
</div>
</div>
JS
removeMeal(item) {
alert(item.id)
for (let s = 0; s < this.menuList.length; s++) {
if (this.menuList[s].meals.length > 0) { // Iterate only if the array is not empty
for (let r = 0; r < this.menuList[s].meals.length; r++) {
if (this.menuList[s].meals[r].id === item.id) {
this.menuList[s].meals.splice(r, 1);
}
}
}
}
}
The code have the id I get in the alert is the id of the meal, but i want to get the parent id rather
Try the following by renaming the variables of your *ngFor statements to make it clear which are top level items vs meals of item.meals. Then update removeMeal() to take in the the parent id value while passing in item.id into removeMeal() as the (click) handler:
Template:
<div *ngFor="let item of menuList">
<h2>Menu</h2>
{{item.name}} - {{item.servedate}}
<h2>Meals</h2>
<div *ngFor="let meal of item.meals">
<span (click)="removeMeal(meal, item.id)">{{meal.name}} - {{meal.mealType}}</span>
</div>
</div>
Component:
removeMeal(item, parentId) {
alert(parentId);
// ...
}
Hopefully that helps!
Introduction
I am trying to develop 2 selection (drop-down) boxes that populates the second box depending on the first selection.
for example
Choose product 1 and the second box will then have format 1, 2 and 5.
choose product 2 and the second may have format 2, 3 and 6.
Problem and Question
The first box has been populated by my array, but the second box is not populating depending on the selection not the first, in fact its not populating at all (see screen shot.
HTML
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format" ng-if="user.productName"
ng-options="format.id as format.name for Format in user.productName.format">
</select>
</div>
</div>
controller.js
.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.user = {productName: $scope.productsandformats[0], format: '1'};
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
Use this code ng-options="format.id as format.name for format in formData.ProductAndFormat.format" instead of your this code ng-options="format.id as format.name for format in user.productName.format"> on your second select box
var app = angular.module('anApp', []);
app.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.formData={};
$scope.formData.ProductAndFormat = $scope.productsandformats[0];
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="dropDown">
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format"
ng-options="format.id as format.name for format in formData.ProductAndFormat.format">
</select>
</div>
</div>
</div>
I asked this question here:
Working With Dynamic Multidimensional key-value pairs in JSON
But it's become a bit more involved and I can't get where I'm going from that answer. If I have a data object that looks like this:
{
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
How can I convert that into an Angular menu? The menu would need to list all of the services, and then if the service has an associated item in "fields" that item should be listed underneath it. So for instance "svc1" and its description should be listed on a line (got that working) but then "Product1" and "Product2" with their descriptions should appear on the next two lines because you can see that "svc1" is listed in the "services" field for "Products." Similarly, "svc4" should appear on a line, and then "Wines" and its description on the next line because "svc4" appears in the "services" field of "Wines."
I think the best way is to unpack and re-pack this JSON object in sequential order in the Angular controller and then push this data out to the Angular view but there might be a solution using only the logic available from the view. I've tried a bunch of nested fors and ifs along these lines (very much not working):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...but that logic just keeps getting more and more dense and isn't working no matter now I try to use it. I liked the simplicity in the answer to the other question but have not had success in replicating it.
So if someone can help me figure out how to get the data into the right sequence using JS I can handle the Angular part. Or if you're an Angular whiz and have an answer along those lines, even better.
So it was a little hard understanding your question, but I gave it my best shot. Does this fiddle show what you are trying to achieve? http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
and finally css:
.indent {
margin-left:10px;
}
I'm using jQuery.dynatree plugin, how to load JSON formatted data using AJAX?
I do all as said in documentation:
<script>
$(function() {
$( "#Tree" ).dynatree({
title:"Thetree",
imagePath:'/jquery/css/',
selectMode:1,
initAjax:{
url:"http://127.0.0.1:2013/jsfolderstree"
}
});
});
</script>
The JS scripts is correctly connected to the HTML page, witout errors.
The requested URL by AJAX returns valid JSON:
[{
"key": "0x55638DB3",
"children": [
{
"key": "0x5D43E57C",
"children": [
{
"key": "0x70A4C1CE",
"children": [
{
"key": "0x799E9590",
"children": [],
"expand": true,
"tooltip": "This is group 5",
"isFolder": true,
"title": "Group 5"
},{
"key": "0x78C952A8",
"children": [],
"expand": true,
"tooltip": "This is group 6",
"isFolder": true,
"title": "Group 6"
}],
"expand": true,
"tooltip": "This is group 3",
"isFolder": true,
"title": "Group 3"
}],
"expand": true,
"tooltip": "This is group 1",
"isFolder": true,
"title": "Group 1"
},{
"key": "0x45B98999",
"children": [
{
"key": "0x6C829354",
"children": [],
"expand": true,
"tooltip": "This is group 4",
"isFolder": true,
"title": "Group 4"
}],
"expand": true,
"tooltip": "This is group 2",
"isFolder": true,
"title": "Group 2"
},{
"key": "0x47BE4570",
"children": [],
"expand": true,
"tooltip": "This is group 7",
"isFolder": true,
"title": "Group 7"
}],
"expand": true,
"tooltip": "Main level of tree",
"isFolder": true,
"title": "Root"
}]
But in result I have message "Loading Error" amd nothing more...
Where is my mistake?
I need load some JSON tree to the web-page, the tree must have methods to get selected node, and visual selection by mouse, that is that I need. Maybe need to use more simple plugins?
Thanks!
If you using jQuery ajax to load a JSON data,jQuery will resolve JSON data by JSON.parse method.
So don't put your JSON data in [], it will call parse error in jQuery ajax method.
{
"key": "0x55638DB3",
"children": [{...}]
....
}