We have plenty of server-side data grid controls, would like to replace them w/ generic clientside Angular. But data is always placed outside of the grid. To find out the cause, I followed the official demo/tutorial, combine .js and .css into local.html, still the same result.enter image description here
Visual Studio 2015 w/ Update, NuGet installed ui-grid(v3.2.9 - 2016-09-21). Must be something missing or the demo has problem.
Here is local.html:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/Scripts/ui-grid.js"></script>
<script src="/Content/ui-grid.css"></script>
<style>
.grid { width: 500px; height: 250px;}
</style>
<script>
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>
</html>
Stupid me, I was loading .css using tag.
So this line
<script src="/Content/ui-grid.css"></script>
should be this instead:
<link rel="stylesheet" type="text/css" href="/Content/ui-grid.css">
It's been working as expected.
Related
Here not working
https://plnkr.co/edit/a7H1ilzkUA3918vc?open=lib%2Fscript.js&deferRun=1
But here in similar example - works, from which I am trying to do:
https://plnkr.co/edit/XLSL581pjgwe3PI1?open=lib%2Fscript.js&deferRun=1
page1.js
export function myAlert() {
alert("car");
}
script.js
import { myAlert } from "./page1.js";
window.onload = myAlert;
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<!-- <body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>Start editing and see your changes reflected here!</p>
</div>
</body> -->
</html>
package.json
{
"name": "#plnkr/starter-angularjs",
"version": "1.0.1",
"description": "AngularJS starter template",
"dependencies": {
"angular": "^1.6.9"
},
"plnkr": {
"runtime": "system",
"useHotReload": false
}
}
Alert message is not displayed.
By #Nick Parsons comment:
<script type="module" src="lib/script.js"></script>
This works.
Post edited with more infos. I have a .asp page that gives me 3 variables. I have no problem working with them. I tried to add a donut chart to show the result using AMCHART charts code. I added the code into my .asp page. The problem is how to add those variables inside the JS code. When I type the variable values directly in the code, the charts are displayed correclty. But I need to add the variable because each customer has its own values...
Code:
<!DOCTYPE html>
<html>
<head>
<title>pie-chart test | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts custom font -->
<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
VAR TOTAL_IPCA;
<!-- HERE IS THE PROBLEM !!! -->
DATA1 = [
{
"TITULOS": "INFLAÇÃO",
"VALORES": <% = Result_1%>
},
{
"TITULOS": "PRÉ-FIXADO",
"VALORES": <% = Result_2%>
},
{
"TITULOS": "SELIC",
"VALORES": <% = Result_3%>
}
]
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 10,
"gradientType": "linear",
"innerRadius": 20,
"baseColor": "#FF8000",
"outlineThickness": 2,
"startEffect": "easeOutSine",
"titleField": "TITULOS",
"valueField": "VALORES",
"fontFamily": "ARIAL",
"fontSize": 15,
"handDrawScatter": 1,
"handDrawThickness": 2,
"theme": "chalk",
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": DATA1
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 300; background-color: #282828;" ></div>
</body>
</html>
I am trying to get this piechart working.
Here is my code to draw simple piechart
<html ng-app="chartApp">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<!-- angular -->
<script type="text/javascript" src="https://code.angularjs.org/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<!-- fusioncharts core -->
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>
<!-- angular plugin -->
<script type="text/javascript" src="js/angular-fusioncharts.min.js"></script>
<!-- zune theme -->
<script type="text/javascript" src="js/zune-theme.js"></script>
<script type="text/javascript">
var pieChart = angular.module("pieChart", ["ng-fusioncharts"]);
// controller for chart
pieChart.controller("chartController", function($scope) {
$scope.myDataSource = {
chart: {
caption: "Age profile of website visitors",
subcaption: "Last Year",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Age group : $label Total visit : $datavalue",
theme: "fint"
},
data: [
{
label: "Teenage",
value: "1250400"
},
{
label: "Adult",
value: "1463300"
},
{
label: "Mid-age",
value: "1050700"
},
{
label: "Senior",
value: "491000"
}
]
}});
</script>
</head>
<body>
<center>
<div ng-controller="chartController">
<fusioncharts
width="600"
height="400"
type="pie3d"
datasource="{{myDataSource}}"
></fusioncharts>
</div>
</center>
</body>
</html>
I get this error
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=chartApp&p1=Error%3…0zc%20(https%3A%2F%2Fcode.angularjs.org%2F1.4.1%2Fangular.min.js%3A20%3A30)
Your angular.module is set to "pieChart", but your ng-app directive is set to chartApp (this directive should be put on body instead of html also)... so Angular has no idea what to bootstrap. Try using angular.module("chartApp", ...) and putting ng-app directive on your 'body' tag.
Having trouble figuring out this problem involving an Angular checkbox form generated from an API.
I can create a checkboxes but two problems: The checkedness of the boxes does not match the values in what's coming from the API, and when I click the checkboxes the name value changes from its default to "true" or "false." Have seen other similar questions but can't get this to work. Plunk here and source code below:
<!doctype html>
<html ng-app="checkTest">
<head>
<meta charset="utf-8">
<title>Angular Multiple Checkboxes</title>
<style>
label {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script type="text/javaScript">
var jsonObj = {"fruits":[
{
"name": "Apple",
"desc": "abcdefg",
"selected": "true",
"status": "Created"
},
{
"name": "Broccoli",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "Cucumber",
"desc": "abcdefg",
"selected": "false",
"status": "Created"
},
{
"name": "Daikon",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
]};
var fruitsObj = jsonObj.fruits;
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<label ng-repeat="fruit in fruits">
<input type="checkbox" name="fruitSelect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}}
</label>
<p>Services: {{fruits}}</p>
</div>
<script type="text/javaScript">
var app = angular.module('checkTest', []);
app.controller('MainCtrl', function($scope) {
$scope.fruits = fruitsObj;
});
</script>
</body>
</html>
Simply the booleans should be true or false only rather than string 'true' or 'false'
Additionally there is not need of ng-checked directive. You also need to use {{index}} in form field so that it will become an unique element of form like by doing serviceSelect-{{$index}}
Markup
<input
type="checkbox"
name="serviceSelect-{{$index}}"
ng-model="fruit.selected"
ng-value="{{fruit.name}}" />
Demo Plunkr
Checkbox for Angular is true or false. The code should be this:
<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">
In the code below Hard coded div works fine. But trying to render s using angularJS, which is not working
<!doctype html>
<html ng-app>
<head>
<title> AngularJS Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 250px;
background-color: grey;
text-align:center;
vertical-align: top;
}
</style>
</head>
<body>
<!-- Testing hard coded div works -->
<div class='box'>
<b>fdhfg</b>
</div>
<!-- div through loops not works -->
<div ng-app="myApp" ng-controller="myCtrl">
<div class='box' ng-repeat="product in Products">
<b>fdhfg</b>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Products = [
{
"ProductID": "12",
"ProductName": "GreenDetergentBar",
"ProductImagePath": "/images/12.png",
"SubCategoryID": "1",
"SubCategoryName": "DetergentBar",
"BrandID": "1",
"BrandName": "Wheel",
"Variants": [
{
"VariantID": "1",
"VariantName": "500GM",
"VariantImagePath": "/images/12_1.png",
"MRP": "20.00",
"SellPrice": "19.50"
},
{
"VariantID": "2",
"VariantName": "1KG",
"VariantImagePath": "/images/12_2.png",
"MRP": "40.00",
"SellPrice": "38.00"
}
]
},
{
"ProductID": "13",
"ProductName": "AmlaHairOil",
"ProductImagePath": "/images/13.png",
"SubCategoryID": "2",
"SubCategoryName": "HairOil",
"BrandID": "2",
"BrandName": "Dabur",
"Variants": [
{
"VariantID": "3",
"VariantName": "100ML",
"VariantImagePath": "/images/13_3.png",
"MRP": "30.00",
"SellPrice": "29.50"
},
{
"VariantID": "4",
"VariantName": "200ML",
"VariantImagePath": "/images/13_4.png",
"MRP": "60.00",
"SellPrice": "58.00"
}
]
}
];
alert ($scope.Products);
});
</script>
</body>
</html>
Can someone help me to fix the problem?
You've missed to define the app name in ng-app.
But in your js you have mentioned:
var app = angular.module('myApp', []);
So correct in your HTML:
ng-app="myApp"
Oops, you have defined ng-app twice. That's why its not working properly. Only one ng-app must be there.