here I created sample program for employee list using wijmo grid, here my problem is i m not able to push the data in gird,
Note: error shows push undefined
Thanks in advance........................................
angular.module('app', ['wj']);
'use strict';
// declare app module
var app = angular.module('app');
// controller
app.controller('appCtrl', function ($scope, $http) {
data = [];
$scope.save=function(reg)
{
var obj = [reg];
$scope.data = new wijmo.collections.CollectionView(obj);
}
// create the filter and expose it to scope for customization
$scope.initialized = function (s, e) {
var flex = s;
$scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
$scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
$scope.$apply();
$scope.filter.filterChanging.addHandler(function () {
console.log('filter changing');
});
$scope.filter.filterChanged.addHandler(function () {
console.log('filter changed');
});
$scope.filter.filterApplied.addHandler(function () {
console.log('filter applied');
});
}
// filters are localizable
// invalidate all Wijmo controls
// using a separate function to handle strange IE9 scope issues
$scope.data = new wijmo.collections.CollectionView(data);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<!-- Wijmo -->
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.min.js" type="text/javascript"></script>
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.grid.filter.min.js" type="text/javascript"></script>
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
<link href="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/styles/vendor/wijmo.min.css" rel="stylesheet" />
<!-- Wijmo-Angular interop -->
<script src="http://demos.wijmo.com/5/Angular/FlexGridFilter/FlexGridFilter/scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" ng-model="reg.fname"> </td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" ng-model="reg.lname"> </td>
</tr>
<tr>
<td>Midle Name</td>
<td>:</td>
<td><input type="text" ng-model="reg.mname"> </td>
</tr>
<tr>
<td><input type="submit" ng-click=save(reg)> </td>
</tr>
</table>
<wj-flex-grid
style="height:300px"
initialized="initialized(s, e)"
items-source="data">
<wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
<wj-flex-grid-column header="fname" binding="fname" format='MMM/dd/yyyy'></wj-flex-grid-column>
<wj-flex-grid-column header="lname" binding="lname" format="t"></wj-flex-grid-column>
<wj-flex-grid-column header="mname" binding="mname"></wj-flex-grid-column>
</wj-flex-grid>
</div>
</html>
You should define newItemCreator function, that takes no parameters:
.controller("appCtrl", function ($scope) {
var data = new wijmo.collections.CollectionView([]);
// here
data.newItemCreator = function() {
var item = {};
item = angular.copy($scope.reg);
return item;
};
$scope.data = data;
// create the filter and expose it to scope for customization
$scope.initialized = function (s, e) {
var flex = s;
$scope.filter = new wijmo.grid.filter.FlexGridFilter(flex);
$scope.downloadsColumnFilterType = wijmo.grid.filter.FilterType.Condition;
$scope.$apply();
$scope.filter.filterChanging.addHandler(function () {
console.log('filter changing');
});
$scope.filter.filterChanged.addHandler(function () {
console.log('filter changed');
});
$scope.filter.filterApplied.addHandler(function () {
console.log('filter applied');
});
};
});
And use addNew() method on your button:
<td><button type="button" ng-click=data.addNew()>Save</button></td>
Related
I have a list view that displays some contents from the api and along side a button that when clicked should show the details of the corresponding item from the list-view on another page, how to associate the button to the specific id and how to present a generic url that accepts these ids to route accordingly. I saw many similar posts but I didn't know how to route those or can't understand how each model is called at that route. Here's my current app, where I've not generalised the routing instead each button is associated to the first id and a route like /1 which takes it to a view to display details of the first element from the collection alone.
pollsscript.js
//defining the model
var QuestionModel = Backbone.Model.extend({
// urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
url : "http://localhost:8000/polls/api/v1/question/",
model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
el: '.page',
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['models'] = this.questionCollection.toJSON();
var template = _.template($('#question-list-template').html(),{});
this.$el.html(template(context));
}
})
return this;
}
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
el: '.page',
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['model'] = this.questionCollection.get(1).toJSON();
var template = _.template($('#question-detail-template').html(),{});
this.$el.html(template(context));
}
})
return this;
}
});
var questionListView = new QuestionListView();
var questionDetailsView = new QuestionDetailsView();
var PageRouter = Backbone.Router.extend({
routes: {
'' : 'home',
'1' : 'details',
},
home : function(){
questionListView.render();
},
details: function(){
questionDetailsView.render();
},
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();
index.html
<html>
<head>
<title> </title>
</head>
<body>
<div class="container">
<h1>All polls</h1>
<div class="page"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
<script type="text/template" id="question-list-template">
<table class = "table table-striped">
<thead>
<tr>
<th>Question</th>
<!-- <th>Date Published</th> -->
<th>Votes</th>
<th>Popular responses</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<% _.each(models, function(model){ %>
<tr>
<td><%= model.question_text %></td>
<!-- <td><%= model.pub_date%></td> -->
<td><%= model.total_votes%></td>
<td><%= model.pop_response%></td>
<td>Show details</td>
</tr>
<% }); %>
</tr>
</tbody>
</table>
</script>
<script type="text/template" id="question-detail-template">
<div>
<div><%= model.question_text %><div/>
<div>
<% _.each(model.choices, function(choices){ %>
<div><%= choices.choice_text %></div>
<div><%= choices.votes %></div>
<% }); %>
</div>
</div>
</script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="pollsscript.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>
index.html
<html>
<head>
<title> </title>
</head>
<body>
<div class="container">
<h1>All polls</h1>
<div class="page"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
<script type="text/template" id="question-list-template">
<table class = "table table-striped">
<thead>
<tr>
<!-- <th> ID </th> -->
<th>Question</th>
<th>Votes</th>
<th>Popular responses</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<% _.each(models, function(model){ %>
<tr>
<!-- <td id="id"><%= model.id %></td> -->
<td><%= model.question_text %></td>
<td><%= model.total_votes%></td>
<td><%= model.pop_response%></td>
<td><a href="#<%= model.id %>" class="btn btn-info show-details">Show details</button></td>
<!-- <td><a href="#<%= model.id %>" class="btn btn-info show-details" data-id="<%= model.id %>">Show details</button></td> -->
</tr>
<% }); %>
</tr>
</tbody>
</table>
</script>
<script type="text/template" id="question-detail-template">
<div>
<div><%= model.question_text %><div/>
<div>
<% _.each(model.choices, function(choices){ %>
<div><%= choices.choice_text %></div>
<div><%= choices.votes %></div>
<% }); %>
</div>
</div>
</script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="pollsscript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>
pollsscript.js
//defining the model
var QuestionModel = Backbone.Model.extend({
// urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
url : "http://localhost:8000/polls/api/v1/question/",
model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
el: '.page',
template : _.template($('#question-list-template').html()),
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['models'] = this.questionCollection.toJSON();
this.$el.html(this.template(context));
}
})
return this;
},
// events: {
// 'click .show-details' : 'viewDetails',
// },
// viewDetails : function(e){
// var id = $(e.currentTarget).data("id");
// var item = this.questionCollection.get(id);
// var questionDetailsView = new QuestionDetailsView({
// model: item
// });
// questionDetailsView.render(); //get and pass model here
// }
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
el: '.page',
template : _.template($('#question-detail-template').html()),
render : function(){
var context = {};
context['model'] = this.model.toJSON();
this.$el.html(this.template(context));
return this;
}
});
var PageRouter = Backbone.Router.extend({
routes: {
'' : 'home',
':id' : 'details'
},
home : function(){
var questionListView = new QuestionListView();
questionListView.render();
},
details : function(id){
//alert(id);
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
var item = this.questionCollection.get(id);
var questionDetailsView = new QuestionDetailsView({
model: item
});
questionDetailsView.render();
}
})
}
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();
I tried this, later, I associated the data-id with the button and gave the model.id I fetched from the api and then got the id on click and then passed the model to be rendered on the detail-view.
Still this doesn't change the router in anyway so still looking for a better way to do it.
Edit
Updated the code and fixed by associating model id with href, and created routes to fetch and get the model from in the router function.
I have a 1 page application which should display a list of objects from a database. I used ng-repeat to create a template to bind data from array in db. As I am new to Angular any help would be great. My code is below:
SERVER.JS
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('eventlist', ['eventlist']);
var bodyParser = require('body-parser');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/eventlist', function (req, res) {
console.log("i received a get request")
db.eventlist.find(function(err, docs){
console.log(docs);
res.json(docs);
});
});
app.post('/eventlist', function (req, res){
console.log(req.body);
db.eventlist.insert(req.body, function (err, doc) {
res.json(doc);
});
});
app.delete('/eventlist/:id', function(req, res){
var id = req.params.id;
console.log(id);
db.eventlist.remove({_id: mongojs.ObjectID(id)}, function (err, doc) {
res.json(doc);
});
});
app.get('/eventlist/:id', function (req, res) {
var id = req.params.id;
console.log(id);
db.eventlist.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) {
res.json(doc);
});
});
app.put('/eventlist/:id', function (req, res) {
var id = req.params.id;
console.log(req.body.name);
db.eventlist.findAndModify({
query: {_id: mongojs.ObjectId(id)},
update: {$set: {name: req.body.name, startDate: req.body.startDate, price: req.body.price, location: req.body.location}},
new: true}, function (err, doc) {
res.json(doc);
}
);
});
app.listen(4000);
console.log("Server running on port 4000");
INDEX.HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/page.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Capstone Project</title>
<meta name="description" content="Carnival and Event Mapping tool">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Enter Zip Code
</li>
<li>
<input type="text"/><button>Submit</button>
</li>
<li class="dropdown">
Events Near Me<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Select Radius</li>
<li>5 Miles</li>
<li>10 Miles</li>
<li>15 Miles</li>
</ul>
</li>
<li>
Ascending
</li>
<li>
Descending
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container" ng-controller="AppCtrl">
<h1>Summer Event List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Price</th>
<th>Location</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" ng-model="event.name"></td>
<td><input class="form-control" ng-model="event.startDate"></td> <!--type="date" (put this next to startDate)-->
<td><input class="form-control" ng-model="event.price"></td> <!--$<input type="number" name="currency" min="0" max="9999" step="0.01" size="4"
title="CDA Currency Format - no dollar sign and no comma(s) - cents (.##) are optional" />-->
<td><input class="form-control" ng-model="event.location"></td>
<td><button class="btn btn-primary" ng-click="addEvent()">Add Event</button></td>
<td><button class="btn btn-primary" ng-click="deselect()">Clear</button></td>
</tr>
<tr ng-repeat="event in eventlist"> <!--also tried ng-repeat="event in eventlist track by $indexs"-->
<td>{{event.name}}</td>
<td>{{event.startDate}}</td>
<td>{{event.price}}</td>
<td>{{event.location}}</td>
<!-- <td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
<td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td> -->
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js" charset="utf-8"></script>
<script src="controllers/controller.js" charset="utf-8"></script>
</body>
</html>
</div>
<!-- /#page-content-wrapper -->
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
</body>
</html>
CONTROLLER.JS
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
var refresh = function(){
$http.get('/eventlist/').then(function(response) {
console.log("I got the data I requested");
$scope.eventlist = response;
$scope.event = null;
});
};
refresh();
$scope.addEvent = function () {
console.log($scope.event);
$http.post('/eventlist/', $scope.event).then(function(response){
console.log(response);
refresh();
});
$scope.update = function() {
console.log($scope.event._id);
$http.put('/eventlist/' + $scope.event._id, $scope.event).then(function(response) {
refresh();
})
};
};
$scope.remove = function(id) {
console.log(id);
$http.delete('/eventlist/' + id).then(function(response) {
refresh();
});
};
$scope.edit = function(id) {
console.log(id);
$http.get('/eventlist/' + id).then(function(response) {
$scope.event = response;
});
};
$scope.deselect = function() {
$scope.event = null;
refresh();
};
}]);
Change it as response.data,
var refresh = function(){
$http.get('/eventlist/').then(function(response) {
$scope.eventlist = response.data;
$scope.event = null;
});
};
I am trying to confugure ngRoute with $http and I am getting error in console when i go to website: localhost:8080
Uncaught ReferenceError: angularModule is not defined(anonymous
function) # item_controller.js:2
angular.js:38Uncaught Error:
[$injector:modulerr]
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…2Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.min.js%3A21%3A19)
When I open http://localhost:8080/home then I see "Whitable error page". I am writeing my API in Spring framework (Spring-boot)
How should I configure these two things to work properly? I cant find any good example how should i write this in good way.
My configuration looks like below:
app.js
'use strict';
var App = angular.module('myApp', ['ngRoute', 'moduleItemController']);
App.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when( '/home', {
templateUrl: '../item.html',
controller: 'ItemController'
}).
when('/item/:itemCode',{
templateUrl: '../../templates/item-detail.html',
controller: 'ItemController'
}).otherwise({
redirectTo: '/home'
});
}]);
item_controller.js
'use strict';
var moduleItemController = angularModule.module('moduleItemController',[])
moduleItemController.controller('ItemController', ['$scope', 'ItemService', function ($scope, ItemService) {
var self = this;
self.item = {id: null, itemCode: '', itemName: '', price: ''};
self.items = [];
self.fetchAllItems = function () {
ItemService.fetchAllItems()
.then(
function (d) {
self.items = d;
},
function (errResponse) {
console.error('Error while fetching Currencies');
}
);
};
self.createItem = function (item) {
ItemService.createItem(item)
.then(
self.fetchAllItems,
function (errResponse) {
console.error('Error while creating item.');
}
);
};
self.updateItem = function (item, id) {
ItemService.updateItem(item, id)
.then(
self.fetchAllItems,
function (errResponse) {
console.error('Error while updating item.');
}
);
};
self.deleteItem = function (id) {
ItemService.deleteItem(id)
.then(
self.fetchAllItems,
function (errResponse) {
console.error('Error while deleting item.');
}
);
};
self.updatePrice = function (newPrice, item, id) {
ItemService.updatePrice(newPrice, item, id)
.then(
self.fetchAllItems,
function (errResponse) {
console.error('Error while updating item.');
}
);
};
self.fetchAllItems();
self.submit = function () {
if (self.item.id === null) {
console.log('Saving New item', self.item);
self.createItem(self.item);
}
else {
console.log('Sth went wrong!');
}
self.reset();
};
self.remove = function (id) {
console.log('id to be deleted', id);
if (self.item.id === id) {
self.reset();
}
self.deleteItem(id);
};
self.reset = function () {
self.item = {id: null, itemCode: '', itemName: '', price: ''};
$scope.myForm.$setPristine();
};
}]);
moduleItemController.controller('ItemController', ['$scope','$routeParams', function ($scope,$routeParams) {
$scope.itemCode = $routeParams.itemCode;
}]);
item_service.js
App.factory('ItemService', ['$http', '$q', function ($http, $q) {
return {
fetchAllItems: function () {
return $http.get('http://localhost:8080/api/item/all')
.then(
function (response) {
return response.data;
console.success('Success');
},
function (errResponse) {
console.error('Error while fetching users');
return $q.reject(errResponse);
}
);
},
.
.
.
// other crud operations
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
<link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
<script src="bower_components/semantic/dist/semantic.js"></script>
<!--Angular dependencies-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/item_controller.js"></script>
<script src="js/service/item_service.js"></script>
</head>
<body ng-app="myApp">
<div ng-view></div>
</body>
</html>
item.html -- here is part of this file where I want to use ngRoute
<table class="ui fixed table">
<thead>
<tr>
<th>Id</th>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th width="20%"></th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in ictrl.items | filter:query">
<td><span ng-bind="i.id"></span></td>
<td class="selectable">
<span ng-bind="i.itemCode"></span>
</td>
<td><span ng-bind="i.itemName"></span></td>
<td><span ng-bind="i.price"></span></td>
<td><span ng-bind="i.quantity"></span></td>
<td>
<button class="negative ui button" ng-click="ictrl.remove(i.id)">delete</button>
</td>
<td>
<button class="ui secondary button">zp</button>
</td>
</tr>
</tbody>
</table>
item-detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Details</title>
<!--SEMANTIC-->
<link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">
<script src="bower_components/semantic/dist/semantic.js"></script>
<!--ANGULAR-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/item_controller.js"></script>
<script src="js/service/item_service.js"></script>
</head>
<body ng-app="myApp">
<div class="item table container">
<h1>TBD DETAILED VIEW FOR {{itemCode}}</h1>
</div>
</body>
</html>
The problem is you are trying to use angularModule instead of angular in item_controller.js. The global object from angular.js is angular and not angularModule
Change the below line as:
var moduleItemController = angularModule.module('moduleItemController',[]);
to
var moduleItemController = angular.module('moduleItemController',[]);
Line 2 of item_controller.js is referencing angularModule.module which is undefined. I think you want angular.module.
When i am trying to inject single or multiple model using service directive in separate java script file , i am getting below error,But it si working in single Javascript files. Here customer is model
Error:
"Binding.js:33 Uncaught ReferenceError: Customer is not defined".
Binding.js:9 Uncaught ReferenceError: Customer is not defined(anonymous function) # Binding.js:9
angular.js:13424 Error: [$injector:unpr] Unknown provider: customerProvider <- customer <- myCustomerController
Below is my code :
Model(customer.js) :
function Customer() {
this.customerName = "David";
this.customerCode = "C001";
}
Binding Code(Binding.js)
function BindingCode($scope,customer) {
$scope.customer = customer;
}
var myCustomerApp = angular.module("myCustomerApp", []);
myCustomerApp.controller("myCustomerController", BindingCode);
myCustomerApp.service('customer', Customer);
View Code(customer.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Binding.js"></script>
</head>
<body ng-app="myCustomerApp">
<div ng-controller="myCustomerController">
<table>
<tr>
<td>
CustomerName
</td>
<td>
<input type=text id="CustomerName" ng-model="customer.customerName" /><br />
</td>
</tr>
<tr>
<td>
CustomerCode
</td>
<td>
<input type=text id="CustomerCode" ng-model="customer.customerCode" />
</td>
</tr>
</table>
</div>
But Same code is working here only model and view and binding code included in section script in customer.html:
Model :Customer.js
function Customer() {
this.customerName = "David";
this.customerCode = "C001";
}
View code (customer.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/CustomerModle.js"></script>
</head>
<script>
function BindingCode($scope, customer) {
$scope.customer = customer;
}
var myCustomerApp = angular.module("myCustomerApp", []);
myCustomerApp.controller("myCustomerController", BindingCode);
myCustomerApp.service('customer', Customer);
</script>
<body ng-app="myCustomerApp">
<div ng-controller="myCustomerController">
</div>
</body>
</html>
You should first inject the service into your controller before yousing that service.
BindingCode.$inject = ['Customer']
Re-arrange the customer.js into
var myCustomerApp = angular.module("myCustomerApp", []);
myCustomerApp.service('customer', Customer);
function Customer() {
this.customerName = "David";
this.customerCode = "C001";
}
Rearrange the Binding.js into
var myCustomerApp = angular.module("myCustomerApp", []);
myCustomerApp.controller("myCustomerController", BindingCode);
BindingCode.$inject = ['Customer']
function BindingCode($scope,Customer) {
$scope.customer = Customer;
}
add <script src="Scripts/customer.js"></script> in your customer.html file
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>