Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table#*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script data-require="ng-table-export#0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<link data-require="ng-table#*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">
<span ng-if="!user.$edit">{{user.name}}</span>
<div ng-if="user.$edit"><input class="form-control" type="text" ng-model="user.name" /></div>
</td>
<td data-title="'Age'" width="200">
<span ng-if="!user.$edit">{{user.age}}</span>
<div ng-if="user.$edit"><input class="form-control" type="number" ng-model="user.age" /></div>
</td>
<td data-title="'Actions'" width="200">
<a ng-if="!user.$edit" href="" class="btn btn-default btn-xs" ng-click="user.$edit = true">Edit</a>
<a ng-if="user.$edit" href="" class="btn btn-primary btn-xs" ng-click="user.$edit = false">Save</a>
</td>
</tr>
</table>
</body>
</html>
I have this simple example..it works.
but when I wanted to do any like this
var App = angular.module('App', ['ngRoute']).controller('tableController', function ($scope, ngTableParams, $sce) {
$scope.data = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.data.length, // length of data
getData: function ($defer, params) {
$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
App.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: function ($scope) {
}
})
.when('/about', {
templateUrl: 'about.html',
controller: 'tableController'
});
});
});
<html ng-app="App">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script data-require="ng-table#*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script data-require="ng-table-export#0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>.
<link data-require="ng-table#*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li> home</li>
<li> about</li>
</ul>
</nav>
<div ng-view></div>
</body>
</html>
something go wrong.
you aren't loading ngRoute, and you have syntax errors in your javascript.
As well, you've got your ng table scripts loading BEFORE your angular scripts.
Related
Here i have a table with glypicon chevron right symbol, when i click the symbol it is not changing to right and left can any one help me please,Here i have a table with glypicon chevron right symbol, when i click the symbol it is not changing to right and left can any one help me please
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Sample Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
th, a {
background-color: green;
color: white;
}
</style>
<script>
$(document).ready(function () {
$(".col1").click(function () {
$(".col2").toggle(100);
});
});
$("#openClose").click(function () {
$(this).toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
});
</script>
</head>
<body ng-controller="ctrl">
<p style="color:blue;font-style:italic;">Hide and display the column</p>
<div class="col-xs-4">
<table class="table table-Hover table-bordered" border="1">
<thead>
<tr>
<th><a>Name<span id="openClose" class="col1 glyphicon glyphicon-chevron-right"></span></a></th>
<th class="col2" ng-hide="hided"><a>Country</a></th>
<th class="col2" ng-hide="hided"><a>Age</a></th>
<th><a>Course</a></th>
<th><a>Office</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in collection">
<td>{{record.name}}</td>
<td class="col2">{{record.country}}</td>
<td class="col2">{{record.age}}</td>
<td>{{record.course}}</td>
<td>{{record.office}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrl', function ($scope) {
$scope.collection = [
{ name: 'Jani', country: 'Norway', age: '21', course: 'Java', office: 'HCL' },
{ name: 'Ram', country: 'India', age: '22', course: '.Net', office: 'Oracle' },
{ name: 'Raghu', country: 'USA', age: '23', course: 'Pega', office: 'Capgemini' },
{ name: 'Raj', country: 'England', age: '24', course: 'Testing', office: 'TechMahindra' },
{ name: 'Sai', country: 'India', age: '25', course: 'Hadoop', office: 'Infosys' }
];
});
</script>
</body>
</html>
I just started trying our lumX. I am trying to use the datatable from this link.
But I think the controller data is not binding. I am new to AngularJs so any help would be appreciated.
I have attached the screenshot of output.
Following is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LumX</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
<div class="toolbar has-divider has-divider--dark">
<div class="toolbar__label pl">
<span>{{ vm.selectedRows.length || 0 }} selected item(s)</span>
</div>
<div class="toolbar__right">
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length === 1">
<i class="mdi mdi-pencil"></i>
</lx-button>
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length >= 1">
<i class="mdi mdi-delete"></i>
</lx-button>
</div>
</div>
<lx-data-table id="lolo" lx-selectable="true" lx-thead="vm.dataTableThead" lx-tbody="vm.dataTableTbody"></lx-data-table>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
<script src="app.js"></script>
<script src="datatable.js"></script>
</body>
</html>
app.js
(function()
{
'use strict';
angular
.module('lumxdemo', [
'lumx',
'Controllers'
]);
angular.module('Controllers', []);
})();
datatable.js
(function()
{
'use strict';
angular
.module('Controllers')
.controller('DemoDataTableController', DemoDataTableController);
DemoDataTableController.$inject = ['$filter', '$scope'];
function DemoDataTableController($filter, $scope)
{
var vm = this;
vm.dataTableThead = [
{
name: 'dessert',
label: 'Dessert',
sortable: true
},
{
name: 'calories',
label: 'Calories',
sortable: true
},
{
name: 'fat',
label: 'Fat (g)',
sortable: true,
sort: 'asc'
},
{
name: 'comments',
label: 'Comments',
icon: 'comment-text',
sortable: false
}];
vm.advancedDataTableThead = angular.copy(vm.dataTableThead);
vm.advancedDataTableThead.unshift(
{
name: 'image',
format: function(row)
{
return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
}
});
vm.dataTableTbody = [
{
id: 1,
image: '/images/placeholder/1-square.jpg',
dessert: 'Frozen yogurt',
calories: 159,
fat: 6.0,
comments: 'Lorem ipsum'
},
{
id: 2,
image: '/images/placeholder/2-square.jpg',
dessert: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
comments: 'Lorem ipsum',
lxDataTableDisabled: true
},
{
id: 3,
image: '/images/placeholder/3-square.jpg',
dessert: 'Eclair',
calories: 262,
fat: 16.0,
comments: 'Lorem ipsum'
}];
$scope.$on('lx-data-table__select', updateActions);
$scope.$on('lx-data-table__unselect', updateActions);
$scope.$on('lx-data-table__sort', updateSort);
////////////
function updateActions(_event, _selectedRows)
{
vm.selectedRows = _selectedRows;
}
function updateSort(_event, _column)
{
vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false);
}
}
})();
Looks like you're just missing an ng-controller in your example so the data can bind correctly.
If you add it to the <body> element for example, it should work as expected.
So change:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
to:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }" ng-controller="DemoDataTableController as vm">
I have been trying to display the json data in the ng-grid since 3 hrs but could not do it.I have followed as per the instructions given in the Getting started guide of ng -grid.But could not display the data in the grid.
In my UserEdit.aspx page my HTML code is as follows:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UserEdit.aspx.cs" Inherits="SampleWebApp.UserEdit" %>
<!DOCTYPE html>
<html >
<head runat="server">
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/ng-grid-2.0.14.min.js"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/Control.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" href="/Styles/ng-grid.min.css" />
<link rel="Stylesheet" type="text/css" href="/Styles/Style.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server" novalidate>
<div ng-app="myApp">
<table style="width: 100%; height: 100%">
<tr style="text-align: center; vertical-align: middle;width:100%">
<td style="width:50%;text-align:left">
First Name:
<input type="text" name="firstname" ng-model="FirstName"/>
</td>
<td style="width:50%;text-align:left">
Last Name:
<input type="text" name="lastname" ng-model="LastName"/>
</td>
</tr>
</table>
</div>
<div ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</form>
</body>
</html>
In my Control.js file for the module i have injected the dependency of ngGrid and in my controller MyCtrl I initialize gridoptions variable.My js code is as follows
In my Control.js it is as follows:
var app = angular.module("myApp", ["ngGrid"]);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34}];
$scope.gridOptions = {
data:'myData'
};
$scope.$apply();
});
FYI ,There are no errors that appear in console.And when i view the example given in http://angular-ui.github.io/ui-grid/ , and if i view the code in the plunker the same thing happens(i.e I cannot see any grid ).
Appreciate any Help!!
You are using MyCtrl outside of ng-app
It should be inside of it's module.
try like this
<div ng-app="myApp">
<div ng-controller="MyCtrl">
</div>
</div>
N:B : you don't need $scope.$apply(); .
I am trying to add directive in angular and use the same to display the values. However the values are not getting displayed.
My html code
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="PizzaPlanetApp">
<div class="header" >
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<pizza-info info=appetizer> </pizza-info>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!--directives-->
<script src="js/directives/pizzaInfo.js"></script>
</body>
</html>
Controller
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
}
];
}]);
Directive(pizzaInfo.js)
app.directive('pizzaInfo', function(){
return {
restirct:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
Directive html(pizzaInfo.html)
<h3 >{{info.name}} </h3>
<p > {{info.description}}</p>
<p >{{info.price | currency}} </p>
I am not getting any error in the console.log. What is that i am missing here?
Syntax Error :))
app.directive('pizzaInfo', function(){
return {
/****/restrict:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
I'm new with AngularJS. I have a simple simple code segment using ng-controller. But it does not works for me. How can I fix this code?
<!DOCTYPE html>
<html ng-app="">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="simpleController">
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
<li ng-repeat="FriendName in friends|filter:tags | orderBy:'-age'">{{tag.FriendName}}--{{tag.age}}</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<!--<script src="Scripts/angular.min.js"></script>-->
<script>
function simpleController($scope) {
$scope.friends =
[{ name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Adam', phone: '555-5678', age: 35 },
{ name: 'Julie', phone: '555-8765', age: 29 }];
}
</script>
</body>
</html>
Angular team just removed the global controller on window. so you have to define you angular module
And also do what #tymeJV told you
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="simpleController">
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
<li ng-repeat="FriendName in friends|filter:tags | orderBy:'-age'">{{FriendName.name}}--{{FriendName.age}}</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("simpleController", function($scope) {
$scope.friends =
[{ name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Adam', phone: '555-5678', age: 35 },
{ name: 'Julie', phone: '555-8765', age: 29 }];
});
</script>
</body>
</html>