I want to use Angular smart-table in my html code.
My environment:
server-side - Apache vs java
client side - html with angular
I downloaded the smart-table repository but I have difficulty to install the module manually and there is no instructions or tutorial for this on the web
What i tried so far is:
In my html file i am pointing to smart-table.js and smart-table.min.js
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
2.in my app I am referencing 'smart-table':
var app = angular.module('FarmManagment', ['smart-table']);
but it's not working the smart-table futures are not recognized.
please help to configure this correctly!!!
this is my code in general:
<html>
<head>
<title>get farms angularjs tester</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../js/style.css">
<link rel="stylesheet" href="../js/normalize.css">
<link rel="stylesheet" href="../app/assets/css/search box">
<link rel="stylesheet" href="../js/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
</head>
<body ng-app="FarmManagment" ng-controller="mainCtrl">
<!-- Data table -->
<table id="auditTable" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection" cellspacing="0" width="100%">
<thead>
<tr>
<th st-sort="FarmName">Farm Name</th>
...
...
</tr>
</thead>
<tbody id ="tbody">
<tr ng-repeat="row in rowCollection">
<td ng-bind="row.FarmName"></td>
...
...
</tr>
</tbody>
</table>
<script>
var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope,$http) {
$http.get('<path>').then(function(response) {
$scope.rowCollection = response.data.farms;
});
});
</script>
</body>
Thanks
Dima
Related
I am new in angular js with datatable and i am getting when on page load, i am trying to add load datatable using angular js.
Error :
angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module PMS due to:
Error: [$injector:modulerr] Failed to instantiate module angularMoment due to:
Error: [$injector:nomod] Module 'angularMoment' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Detail Error
Error link
My Controller
var app = angular.module('PMS', ['angularMoment', 'ui.router', 'datatables'])
.filter('jsonDate', ['$filter', function($filter) {
return function(input, format) {
return (input) ? $filter('date')(parseInt(input.substr(6)), format) : '';
};
}]);
app.controller('SpaceController', function($scope, SpaceService) {
$scope.getAll = function() {
loader(true);
var getData = SpaceService.getAllData();
getData.then(function(response) {
if (response.data.success) {
$scope.listdt = response.data.data;
$scope.populateStatus();
loader(false);
} else {
errorAlert("Oops", response.data.message);
loader(false);
}
});
}
});
My Template
# {
Layout = null;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="~/Scripts/PMS_theme_js/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/PMS_theme_css/css/style.css" rel="stylesheet">
</head>
<body ng-app="PMS" ng-controller="SpaceController">
<table datatable="ng" class="table display" id="TblID">
<thead>
<tr>
<th>ID</th>
<th>Key</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in listdt">
<td>{{d.SpaceID}}</td>
<td>{{d.SpaceKey}}</td>
<td>{{d.SpaceName}}</td>
<td>{{d.SpaceDesc}}</td>
<td> <span class="label label-table {{d.StatusKey == 'A' ? 'label-success' : 'label-red'}}">{{d.StatusName}}</span></td>
<td>
<a class="btn btn-primary btn-sm" ng-click="edit(d)"><i class="fa fa-pencil fa-lg"></i></a>
<a class="btn btn-danger btn-sm" ng-click="delete(d)"><i class="fa fa-trash fa-lg"></i></a>
</td>
</tr>
</tbody>
</table>
<script src="~/Scripts/PMS_theme_js/plugins/bower_components/jquery/dist/jquery.min.js"></script>
<script src="~/Scripts/PMS_theme_js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/Scripts/datatables/media/js/jquery.dataTables.js"></script>
<script src="~/Scripts/angular-datatables/dist/angular-datatables.js"></script>
<script src="~/Scripts/Angular/Module.js"></script>
</body>
</html>
Its working fine with Datatable,but when add datatable module its start getting error.Any reason where and what i am doing wrong with Angular js datatable.
An error you mentioned shows that you've not injected angularMoment correctly, refer to the documentation.
Ensure that you've included both moment.js and angular-moment.js in your application, which would look something like following in your case -
<script src="~/Scripts/moment/moment.js"></script>
<script src="~/Scripts/angular-moment/angular-moment.js"></script>
Hello I am very new to angularjs and need some help to update each row. Let's assume that User change any of the option from dropdown box or checkbox, i need to keep track of them and pass that data to backend whenever user click "Submit". How can i achieve that ?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'Need to update Row that I have changed';
$scope.submitButton = function(){
alert("please help me !!!");
}
$scope.cities = ["Austin",
"Leander",
"RoundRock"];
$scope.data = [{check:'active',firstName:'James',lastName:'Austin',city:'Leander'},
{check:'inactive',firstName:'Niki',lastName:'Jones',city:'Austin'},
{check:'active',firstName:'Amy',lastName:'Parker',city:'RoundRock'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table>
<thead>
<th>Active</th>
<th>First Name</th>
<th>Last Name</th>
<th> City</th>
</thead>
<tbody>
<tr ng-repeat="d in data">
<td><input type="checkbox" ng-checked="d.check=='active'"/>{{d.check}}</td>
<td>{{d.firstName}}</td>
<td>{{d.lastName}}</td>
<td><select ng-model="d.city" ng-change="showSelectValue(d.city)" ng-options="c for c in cities"></select></td>
</tr>
</tbody>
</table>
<button type="button" ng-click="submitButton()">Submit</button>
</body>
</html>
`I am very new to Angularjs and need help with updating the each row.
Whenever user change the value either checkbox or dropdown list, I need to keep track of them and pass that data to backend whenever user click save.
I'm using an API to make a table of all the data. The JSON url is connected (which I verified with a 200 Status). What am I doing wrong? Most importantly, if there is another way to accomplish what I'm trying to do, I'm open.
(function() {
var app = angular.module("RacingApp", []);
app.controller("DriversCtrl", function($scope, $http) {
$http.get("http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK").then(function(response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>F1 Racing API</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="RacingApp">
<div class="container" ng-controller="DriversCtrl">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-striped table-bordered table-compressed">
<thead id="table-header">
<tr>
<th colspan="5">
<div class="text-left col-md-6">Drivers Championship Standings</div>
<div class="text-right col-md-6">
</div>
</th>
</tr>
</thead>
<thead>
<tr>
<th>Place</th>
<th>Nationality</th>
<th>Name</th>
<th>Sponsor</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in information">
<th scope="row">{{$index + 1}}</th>
<td>{{info.Driver.nationality}}</td>
<td>{{info.Driver.givenName}} & {{info.Driver.familyName}}</td>
<td>{{info.Constructors[0].name}}</td>
<td>{{info.points}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
I found a resolution. For whatever reason, the package I received back from the server was MRData.data, which didn't show up in the actual JSON data. It works now!!
Hers is my code in html pasted in WebContent folder created using Dynamic Web Project in eclipse:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('country_codes.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body ng-controller="CountryCtrl">
<h2>Angular.js JSON Fetching Example</h2>
<table>
<tr>
<th>Code</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat="country in countries | orderBy: 'code' ">
<td>{{country.code}}</td>
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
</body>
</html>
The json data is written in "country_codes.json" which is placed at the same location where html file has been placed.
]1
But I am getting the output as shown in below image.Please let me know why it is not reading data from server
you missed ng-app directive
<body ng-app="countryApp" ng-controller="CountryCtrl">.....</body>
I have an existing angularjs app which was working fine until I converted it to ionic. I tested the website on the chrome browser and discovered that I can no longer scroll down to see a long table.
The only change I made was in the html code;
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>test-view</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/js/bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="lib/ionic/js/bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!--<script src="../../bower_components/angular/angular.min.js"></script>-->
<!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
<script src="lib/ionic/js/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-material/angular-material.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-route/angular-route.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-moment/angular-moment.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-google-chart/ng-google-chart.js"></script>
<script src="lib/ionic/js/bower_components/moment/moment.js"></script>
<script src="lib/ionic/js/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="lib/ionic/js/bower_components/ng-table/dist/ng-table.js"></script>
<div ng-include src="'partials/header.html'"></div>
</head>
<body>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<div ng-controller="ViewCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>symbol</th>
</tr>
<thead>
<tbody>
<tr ng-repeat="vw $data">
<td data-title="'name'" >
{{vw.name}}
</td>
<td data-title="'symbol'">
{{vw.symbol}}
</td>
</table>
</div>
</body>
</html>
How to make the code scrollable?
Wrap this tag over your table.
<ion-content class="has-header" overflow-scroll="true">
<!-- table contents here -->
</ion-content>
The above code will use native scroll instead of js scroll. Note that it may not work with lower versions of Android. As long as you are using Android 4.2 and above, you are quite safe.
Since you are adding a html partial, I assume there is a header on your html. Therefore, use class="has-header".