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.
I have included code of index.html, app.js and json. I have created views needed with me. But I want to load the json and display it on all the views of my application. I am able to call the json on one page but not on the other views. Please provide me some pointers.
HTML Code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div class="container">
<div>
<h1 style="text-align:right">Visa Cares</h1>
<h3 style="text-align: left">Total Body Transformation</h3>
</div>
<div ng-controller="myController" >
<ul class="nav nav-tabs">
<li>Home</li>
<li>Back</li>
</ul>
<button ng-click="clickButton()">List</button>
<table border="0" cellpadding="3">
<tr ng-repeat="x in modules">
<td>{{x.filters}}</td>
<td>{{ x.title}}</td>
<td>{{x.feature}}</td>
<td>{{x.order}}</td>
</tr>
</table>
<pre>
<div ng-repeat="y in modules">
{{y.buildings.building1.floors.floor1.rooms.room1 | prettyJSON}}
</div>
</pre>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view>
Hello AJ
</div>
<div>Angular seed app: v<span app-version></span></div>
<div>
<footer>
<ul class = "nav nav-tabs">
<li>Campus Buildings</li>
<li>Conference Rooms</li>
<li>Hotteling Areas</li>
<li>Huddle Rooms</li>
<li>Shuttle Schedule</li>
</ul>
</footer>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</div>
</body>
</html>
Controller Code:
'use strict';
// Declare app level module which depends on views, and components
var wfApp = angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
wfApp.controller('myController', ['$scope', '$http', function($scope, $http) {
$scope.clickButton = function() {
$http.get('document.json').success(function(data) {
$scope.modules = data.modules;
$scope.modules = data.modules.buildings.building1;
});
}
}]);
I have a document.json which contains following data:
{"modules": [
{
"title": "Conference Rooms",
"feature": "list",
"filters": "Conference",
"Order": 1,
"icon": "conference.png"
},
{
"title": "Hoteling Rooms",
"feature": "list",
"filters": "Hotel",
"order": 2,
"icon": "hoteling.png"
},
{
"title": "Huddle Rooms",
"feature": "list",
"filters": "Huddle",
"order": 3,
"icon": "huddle.png"
},
{
"title": "Shuttle Schedule",
"feature": "shuttle_list",
"order": 4,
"csvInput": {
"d1Pickup": [
"8:00",
"8:30",
"9:00"
],
"d4Pickup": [
"7:50",
"8:20",
"8:50"
]
},
"icon": "shuttle.png"
},
{
"feature": "map",
"order": 0,
"icon": "campus.png",
"buildings": {
"building1": {
"order": 0,
"id": "D1",
"label": "D1 - 8910 Ridgeline Blvd",
"floors": {
"floor1": {
"name": "1<sup>st</sup> Floor",
"order": 0,
"image": "floor1_map.png",
"rooms": {
"room1": {
"name": "Room 1",
"number": "D1-F1-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F1-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F1-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
},
"floor2": {
"name": "2<sup>nd</sup> Floor",
"order": 1,
"image": "floor2_map.png",
"rooms": {
"room1": {
"name": "Room 1",
"number": "D1-F2-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F2-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F2-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
},
"floor3": {
"name": "3<sup>rd</sup> Floor",
"order": 2,
"image": "floor3_map.png",
"rooms": {
"room 1": {
"name": "Room 1",
"number": "D1-F3-1",
"occupancy": "12",
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Conference",
"coords": "100,100",
"hit_center": "80,80"
},
"room2": {
"name": "Room 2",
"number": "D1-F3-2",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Hotel",
"coords": "150,100",
"hit_center": "130,80"
},
"room3": {
"name": "Room 3",
"number": "D1-F3-3",
"occupancy": 10,
"av": "Projector",
"phoneNumber": "xxx-xxx-xxxx",
"type": "Huddle",
"coords": "200,150",
"hit_center": "180,130"
}
}
}
}
}
}
}
],
"settings": {
"building": "D1",
"floor": 4,
"timeout": "120 (in seconds)",
"cssOverride": "custom.css",
"kiosk_coords": "200,200"
}
}
You should try returning your "views" as partials via the controller. This way they can all use the same scope. Otherwise, you need to call the app/controller in each view in order to get access to the same json data within the scope.
Sounds like the perfect use of a Service
// Adding injection of jsonService to controller
wfApp.controller('myController', ['$scope', '$http', 'jsonService', function($scope, $http, jsonService) {
// You can use jsonService.getJson() to get the file from anywhere the service is injected.
jsonService.getJson().success(function(data) {
$scope.modules = data.modules;
});
// Now your JSON is loaded (after promise resolves) and it can be used anywhere in the controller scope.
}]);
// Service to get the JSON file for use anywhere in the application
wfApp.service("jsonService", ["$http", function($http) {
return {
getJson: function() {
return $http.get('document.json');
}
}
}]);
The service can also be called in your $routeProvider using a resolve to load the JSON before the view is processed. This may be the ideal solution if you require the data immediately on page load for controller methods or data binding.
I have the following data, how to query string under "talent"?
I used ng-Repeat='friend in friends', but it can't search the data under talent.
For example: When I type piano, I expect it show the John node.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example98-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init='friends = {
"John-JqI-o4tusIKK1psPJw4": {
"habits": "guitar",
"job": "teacher",
"name": "John",
"talents": {
"aaa": {
"rating": "high",
"talent": "piano"
},
"bbb": {
"rating": "beginner",
"talent": "playing"
}
}
},
"Peter-JqI9Svtr2fQLyJoMmyZ": {
"habits": "reading",
"job": "student",
"name": "Peter",
"talents": {
"ccc": {
"rating": "beginner",
"talent": "CAM"
},
"ddd": {
"rating": "advanced",
"talent": "Typing"
}
}
}
}'></div>
<label>Search:
<input ng-model="searchText">
</label>
<table id="searchTextResults">
<tr>
<th>Name</th>
<th>talents</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.talents}}</td>
</tr>
</table>
Edit: I have restore the hash key to Peter node.
The filter filter works on an array, not on objects, see the docs for that: https://docs.angularjs.org/api/ng/filter/filter
As you can see, converting this to an array works as intended:
http://plnkr.co/edit/rAQrt0jKB5VgcEHEIi45?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example98-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init='friends = [{
"habits": "guitar",
"job": "teacher",
"name": "John",
"talents": {
"aaa": {
"rating": "high",
"talent": "piano"
},
"bbb": {
"rating": "beginner",
"talent": "playing"
}
}
},
{
"habits": "reading",
"job": "student",
"name": "Peter",
"talents": {
"ccc": {
"rating": "beginner",
"talent": "CAM"
},
"ddd": {
"rating": "advanced",
"talent": "Typing"
}
}
}]'></div>
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr><th>Name</th><th>talents</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.talents}}</td>
</tr>
</table>
</body>
</html>
EDIT:
I've removed both keys"John" and "Peter", I wouldn't recommend using names as property keys, it's hard to reference them in an ng-repeat since both objects have a different key ("John" and "Peter"), so they're technically not the same kind of object
EDIT#2:
If you really want to have 2 different keys, you could use this (extremely ugly) solution:
http://plnkr.co/edit/rAQrt0jKB5VgcEHEIi45?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example98-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init='friends = [{
"John" : {
"habits": "guitar",
"job": "teacher",
"name": "John",
"talents": {
"aaa": {
"rating": "high",
"talent": "piano"
},
"bbb": {
"rating": "beginner",
"talent": "playing"
}
}
}},
{"Peter" : {
"habits": "reading",
"job": "student",
"name": "Peter",
"talents": {
"ccc": {
"rating": "beginner",
"talent": "CAM"
},
"ddd": {
"rating": "advanced",
"talent": "Typing"
}
}
}}]'></div>
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr><th>Name</th><th>talents</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td ng-if="friend.John">{{friend.John.name}}</td>
<td ng-if="friend.Peter">{{friend.Peter.name}}</td>
<td ng-if="friend.John">{{friend.John.talents}}</td>
<td ng-if="friend.Peter">{{friend.Peter.talents}}</td>
</tr>
</table>
</body>
</html>
I'm trying to render the contents of a scope variable in AngularJS. This is my code.
<!doctype html>
<html ng-app="myApp">
<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>
<div ng-controller="myCtrl">
<div class='box' ng-repeat="product in Products">
<br>
<b>{{product.BrandName}}</b>
<br>
{{product.ProductName}}
<br><br>
<img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
<br>
<br>
<select ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant">
<option ng-selected="SelectedVariant"
ng-repeat="variant in product.Variants"
value="{{variant.VariantID}}">
{{variant.VariantName}}
</option>
</select>
<br>
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
<br>
<button> Add to Cart </button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Products = [
{
"ProductID": "12",
"ProductName": "Green Detergent Bar",
"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": "Amla Hair Oil",
"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"
}
]
}
];
});
</script>
</body>
</html>
There are three problems i am seeing with above code.
Initially select box is showing second option as selected and also 1 option as blank entry. Though blank entry disappears as soon as i chooses any option in the list. But i want first option of select box to be selelected by default and there is no blank option in list when page loads.
When i'm selecting new option in the list, its price is not getting change. How to do that?
At the time of loading option is selected second one, but price of first is displaying. How to fix this bug?
Any help will be highly appreciated.
Use ng-options which will bind the object to the value.
<select ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants"></select>
DEMO
I am tring to create a TreeView with drag and drop functionality. I use this plugin
http://ngmodules.org/modules/angular-ui-tree, a demo is available here:
http://jimliu.github.io/angular-ui-tree/
But when I do the same thing things as written in the documentation my TreeViewdoes not load - why?
Here is my code.
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="ctr">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.item = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
}
</script>
</html>
Plunker :
http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview
There is a syntax error, the last closing ) is missing in the bottom script block.
The controller name is mismatch, the MainCtrl is registered but the ctrl is used in ng-controller.
In the first ng-repeat="item in list", it loop over $scope.list but the data is in $scope.item.
Plunker: http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview