I'm new to Angularjs and I'm currently try to use Ckeditor in my webapp.
I'm currently getting
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=editor&p1=Error%3A%…Flocalhost%3A3000%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A390)
Any idea of what I did wrong?
In my Editor.html
<!DOCTYPE html>
<html lang="en" ng-app="editor">
<head>
<meta charset="UTF-8">
<title>Editor Test</title>
<script src="../bower_components/angular/angular.min.js"</script>
<script src="../bower_components/ckeditor/ckeditor.js"</script>
<script src="../angular-ckeditor/angular-ckeditor.min.js"</script>
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../bootstrap-select-1.11.2-dist/css/bootstrap-select.css">
<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div ng-controller="CkeditorController">
<div ckeditor="options" ng-model="textdata" ready="onReady"></div>
<br>
<div style="text-align: center">
note content: {{1+1}}
<button ng-click="getTextData() id="profile-button" class="btn btn-lg btn-primary" type="submit">Submit</button>
</div>
</div>
<script scr="../angular/editor.js"></script>
</body>
</html>
In my javascript: editor.js
angular.module('editor', ['ckeditor'])
.controller('CkeditorController', function ($scope) {
$scope.textdata = '';
// you can set your configuration here
$scope.options = {
language: 'en',
allowedContent: true,
entities: false
};
$scope.onReady = function () {
//write you code here if you have to do something after editor is loaded
};
// logging ckeditor textarea content in console
$scope.getTextData = function() {
console.log($scope.textdata);
}
});
In my controller:main.js
module.exports.index=function(req, res, next) {
res.render('index', { title: 'Hello world' });
};
module.exports.dashboard=function(req, res, next) {
res.render('dashboard', {});
};
module.exports.editor=function(req, res, next) {
res.render('editor', {});
};
Thanks!
></script> is missing on your angular imports.
Related
Here is my EJS file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sart Plug</title>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/usrDashboard.css">
<link rel="icon" href="/images/plugimg.png" type="image/x-icon" />
</head>
<body>
<div class="container">
<div class="header">
Select Device
<div class="header-right">
Log Out
</div>
</div>
<div class="jumbotron" id="jumbo">
<p><%=data.noResult%></p>
<div class="row">
<% for(var i=0; i < data.result.length; i++) { %>
<div class="col-25">
<a href="/plugDashboard">
<p><img class="img-fluid" src="/images/plugimg.png" alt="Plug Image"></p>
<p><h3><%= data.result[i].device_name %></h3></p>
<p><h6><%= data.result[i].device_address %></h6></p>
</a>
</div>
<% } %>
</div>
</div>
</div>
</body>
</html>
Html view here
My routes are in the below route:-
app.get('/usrDashboard', checkAuthenticted, (req, res) => {
let email = req.user.email;
con.query("SELECT device_name, device_address FROM pluglist WHERE email ='"+ email +"' " , (err, result, fields)=> {
if(err) throw err;
console.log(result);
if (result.length === 0) {
res.render('usrDashboard',{data:{email: email,
result:result,
noResult:'You have no saved device'}});
}
else {
res.render('usrDashboard',{data:{email: email,
result:result}});
}
});
})
app.get('/plugDashboard', checkAuthenticted, (req, res) => {
console.log(req);
res.render('plugDashboard');
})
SO here I want, whenever I click on any of the div I want to print the mac id in log from the respective div in plugDashboard section. So is there any way to do so? I searched for many solutions none of them were helpful for me.
You can add new GET express route, for example:
router.get('/get_mac_info/:mac_id', function(req, res, next) {
res.json({
mac_id: 'test_id'
});
});
and after that just add ajax call on click event:
$(function () {
$(document).on('click', '.col-25', function (e) {
$.get('/get_mac_info/' + mac_id, function(data){
$('.print_container').text(data)
})
e.preventDefault();
});
});
I'm trying to create a suggestion box app in JavaScript using AngularJS 1.X that people can post suggestions on and upvote those suggestions. I'm having trouble getting the suggestions to show up on the page. Help? Here's my code:
index.html:
<!DOCTYPE html>
<html>
<Head>
<title>Suggestion Box</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</Head>
<body ng-app="SuggestionBox" ng-controller="HomeController">
<h1> Suggestion Box </h1>
<form ng-submit="addSuggestion()" style="margin-top: 50px">
<h3> Submit Your Suggestion </h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Great ideas here" ng-model="title"></input>
</div>
<button type="submit" class="btn btn-primary">Suggest</button>
</form>
<div class="main" ng-repeat="post in posts"></div>
<p>
<span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"></span> Upvotes: <span id="$scope.posts.upvotes"></span>
</p>
<!-- Modules -->
<script type="text/javascript" src="C:\Users\Olivia\Documents\JS\app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="C:\Users\Olivia\Documents\JS\controllers\HomeController.js"></script>
<!-- Services -->
<script type="text/javascript" src="C:\Users\Olivia\Documents\JS\Services\Suggestions.js"></script>
</body>
</html>
Controller:
app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
$scope.helloWorld = "Hello, AngularJS!",
$scope.posts = Suggestions.posts,
$scope.addSuggestion = function($scope.title) {
if(!$scope.title || $scope.title === "") {
return;
};
$scope.posts.push({
title: $scope.title,
upvotes: 0,
});
$scope.title = '';
}
$scope.upVote = function(post) {
$scope.posts[post].upvotes += 1;
};
}]);
app.js:
var app = angular.module('SuggestionBox', ['ngRoute']);
I haven't added any routing yet so the route is just sitting there
Suggestions.js:
app.factory('Suggestions', [function(){
var demoSuggestions = {
posts: [
{
title: 'Insert suggestion here',
upvotes: 10,
comments: [],
},
{
title: 'See above',
upvotes: 2,
comments: [],
},
]
};
return demoSuggestions;
}]);
Any help would be greatly appreciated. Thanks!
This is a working version. It looks like you're pretty new to AngularJS. Feel free to ask any questions.
"use strict";
var app = angular.module('SuggestionBox', ['ngRoute']);
app.factory('SuggestionsFactory', [function () {
var posts = [
{
title: 'Insert suggestion here',
upvotes: 10,
comments: [],
id: 1
},
{
title: 'See above',
upvotes: 2,
comments: [],
id: 2
}
];
function postFactory(title) {
return {
title: title,
upvotes: 0,
comments: []
}
}
var getPosts = function(){
return angular.copy(posts);
}
var addPost = function (title) {
posts.push(postFactory(title));
}
var removePost = function(id){
// remove from posts by id
}
return {
getPosts: getPosts,
removePost: removePost,
addPost: addPost
}
}]);
app.controller('HomeController', ['$scope', 'SuggestionsFactory', function ($scope, SuggestionsFactory) {
var vm = this;
vm.posts = SuggestionsFactory.getPosts();
vm.title = '';
vm.addSuggestion = function () {
if (vm.title && vm.title !== '') {
SuggestionsFactory.addPost(vm.title);
vm.posts = SuggestionsFactory.getPosts();
vm.title = '';
}
}
vm.upVote = function (post) {
post.upvotes += 1;
};
}]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body ng-app="SuggestionBox" ng-controller="HomeController as vm" class="container">
<div class="row">
<div class="col-sm-12">
<h1> Suggestion Box </h1>
<ng-form style="margin-top: 50px">
<h3> Submit Your Suggestion </h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Great ideas here" ng-model="vm.title" />
</div>
<button type="button" class="btn btn-primary" ng-click="vm.addSuggestion(vm.title)">Suggest</button>
</ng-form>
<div class="main" ng-repeat="post in vm.posts">
<p style="font-weight:bold;">{{post.title}}</p>
<div>
<button ng-click="vm.upVote(post)">upvote</button> Upvotes:
<span id="upvotes">{{post.upvotes}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
Main page URL: http://localhost:3000/
Current second page URL: http://localhost:3000/#/titleDetails.html
Expected second page URL: http://localhost:3000/titleDetails.html
Currently when I click on the title in my main page, the URL contains an extra /# which causes the page to be redirected to titleDetails.html.
The directory of titleDetails.html and index.html is in the same directory.
May I know how can I fix this?
Original Post: AngularJS Display 1 Post in New Page
app.js
(function () {
angular
.module("BlogApp", [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller("BlogController", BlogController);
function BlogController($scope, $http, $rootScope, $location) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.titleDetails = titleDetails;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post)
{
$scope.postDetail = post;
$location.path('/titleDetails.html');
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
Console Error in index.html:
angular.js:13708 Error: [$location:nobase] http://errors.angularjs.org/1.5.7/$location/nobase
at angular.js:38
at sf.$get (angular.js:13384)
at Object.invoke (angular.js:4709)
at angular.js:4508
at d (angular.js:4655)
at e (angular.js:4679)
at Object.invoke (angular.js:4701)
at R.instance (angular.js:10234)
at m (angular.js:9147)
at g (angular.js:8510)
Angular has 3 routing operates:
Hashbang Mode
HTML5 Mode
Hashbang in HTML5 Mode
You can configure: $locationProvider.html5Mode(true).hashPrefix('!');
Check documentation
I'm working on freecodecamp voting app (https://www.freecodecamp.com/challenges/build-a-voting-app) using MEAN stack. I've completed back end part(does not include user authentication as of now).
Currently i'm focusing on front end part. I've created a html page which displays the list of all the polls. Now ideally speaking, when i click on a particular poll, i should be redirected to a template html which displays the options as well as the vote count for each option. For this purpose i've used ng-route library. But instead of getting the html page, i'm getting json array from node server.
Here are my code snippets:
index.html
<!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" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">
<!-- div for button group><!-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="home">Home</button>
<button type="button" class="btn btn-default" id="login">Log In</button>
</div>
<!-- div for header><!-->
<div class='header'>FreeCodeCamp Voting App</div>
<!-- div for voting list><!-->
<div ng-controller="VotingListController as v">
<ul class='list'>
<li class='question row' ng-repeat='poll in v.polls'><a ng-href='/{{poll.question}}'>{{poll.question}}</a></li>
</ul>
</div>
<poll_view></poll_view>
</body>
</html>
app.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
var list = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
list.polls=data;
});
}]);
})();
routes.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp')
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/:question',{
templateUrl:'/../template/poll_view.html',
controller:'pollReadController',
controllerAs:'pollRead'
});
}]);
})();
poll-read-controller.js
(function(){
angular.module('votingApp')
.controller('pollReadController',function($http,$routeParams){
var controller = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/'+$routeParams.question).success(function(data){
controller.vote = data;
});
});
})();
poll_view.html
<div ng-repeat="vote in pollRead.vote">
<ol>
<li>
<p>Option:{{vote.option}}</p>
<p>Count:{{vote.count}}</p>
</li>
</ol>
</div>
and here's a sample json data I'm getting instead of html page:
[
{
_id: "57d90d6bbb1828e112ff70dc",
question: "google or yahoo",
__v: 0,
vote: [
{
option: "google",
count: 2,
_id: "57d90d6bbb1828e112ff70de"
},
{
option: "yahoo",
count: 0,
_id: "57d90d6bbb1828e112ff70dd"
}
]
}
]
server/index.js
var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {
console.log('Listening on port: '+ port);
app.use(express.static(path.join(__dirname + "/../client")));
app.use(bodyParser.json());
app.set('view engine','html');
//app.use(express.logger('dev'));
//app.use(express.methodOverride());
//app.use(app.router);
// Add Middleware necessary for REST API's
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(methodOverride('X-HTTP-Method-Override'));
// CORS Support
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
app.get('/list',function(req,res){
console.log('received')
poll.find({},function(err,list){
if(err)throw err;
res.json(list);
});
});
app.get('/:question',function(req,res){
poll.find({question: req.params.question},function(err,data){
if(err)throw err;
res.json(data);
});
});
app.post('/question',function(req,res){
var p = new poll({question:req.body.question,vote:req.body.vote});
p.save(function(error){
if(error){
throw error;
}
res.json(p);
});
});
app.put('/:question',function(req,res){
poll.update(
{
"question": req.params.question,
"vote.option":req.body.option
},
{$inc:{"vote.$.count":1}},
function(error){
if(error)throw error;
}
);
res.json(poll);
});
app.put('/question/update/:id',function(req,res){
poll.update(
{"_id":req.params.id},
{"$set":{"question":req.body.question,"vote":req.body.vote}},
function(error){
if(error)throw error;
}
);
});
app.listen(port);
});
Here's link to my project: https://ide.c9.io/ajinkya009/fcc_voting_app
P.S. I'm learning MEAN stack since two months(quite beginner), so if you find any mistake in the code,no matter how trivial, please let me know.
Finally solved it!! I had not added 'fragment identifier' (#) in the anchor href link in index.html. Along with this, I had to tweak some of the other code as well.
Here is the updated and working code:
index.html
<!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" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">
<!-- div for button group><!-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="home">Home</button>
<button type="button" class="btn btn-default" id="login">Log In</button>
</div>
<!-- div for header><!-->
<div class='header'>FreeCodeCamp Voting App</div>
<!-- div for voting list><!-->
<div ng-controller="VotingListController as v">
<ul class='list'>
<li class='question row' ng-repeat='poll in v.polls'><a ng-href='#/list/{{poll.question}}'>{{poll.question}}</a></li>
</ul>
</div>
<div class='container' ng-view></div>
</body>
</html>
client/app.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider
.when('/list/:question',{
templateUrl:'/../template/poll_view.html',
controller:'pollReadController',
controllerAs:'pollRead'
});
//$locationProvider.html5Mode(true);
}]);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
var list = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
list.polls=data;
});
}]);
ang.controller('pollReadController',function($scope,$http,$routeParams){
var list = this;
alert($routeParams.question);
$http.get('/list/'+$routeParams.question).success(function(data){
list.polls = data;
})
.error(function(){
alert("An unexpected error occured!");
});
});
})();
client/poll_view.html
<div class='container' ng-repeat="poll in pollRead.polls">
<h2>{{poll.question}}</h2>
<div ng-repeat = "v in poll.vote">
<ul>
<li>
<p>Option:{{v.option}}</p>
<p>Count:{{v.count}}</p>
</li>
</ul>
</div>
</div>
server/index.js
var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {
console.log('Listening on port: '+ port);
app.use(express.static(path.join(__dirname + "/../client")));
app.use(bodyParser.json());
app.set('view engine','html');
//app.use(express.logger('dev'));
//app.use(express.methodOverride());
//app.use(app.router);
// Add Middleware necessary for REST API's
//app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
//app.use(methodOverride('X-HTTP-Method-Override'));
// CORS Support
/*app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});*/
app.get('/list',function(req,res){
console.log('received');
poll.find({},function(err,list){
if(err)throw err;
res.json(list);
});
});
app.get('/list/:question',function(req,res){
poll.find({question: req.params.question},function(err,data){
if(err)throw err;
res.json(data);
});
});
app.post('/question',function(req,res){
console.log(req.body);
console.log(req.body.vote);
//res.json({success:"200"});
var o = req.body.option;
var c = req.body.count;
/*var p = new poll(
{question:req.body.question,vote:{option,count}}
);*/
var p = new poll({question:req.body.question,vote:req.body.vote});
p.save(function(error){
if(error){
throw error;
}
res.json(p);
});
});
app.put('/:question',function(req,res){
poll.update(
{
"question": req.params.question,
"vote.option":req.body.option
},
{$inc:{"vote.$.count":1}},
function(error){
if(error)throw error;
}
);
res.json(poll);
});
app.put('/question/update/:id',function(req,res){
console.log(req.params.id);
console.log(req.body);
poll.update(
{"_id":req.params.id},
{"$set":{"question":req.body.question,"vote":req.body.vote}},
function(error){
if(error)throw error;
}
);
});
app.listen(port);
});
I have a object which contains name and id.I just want to do the autocomplete based on name.I have tried the code as shown below
//Js file
var app=angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
$scope.complete=function(){
$("#autocomp").autocomplete({
source: $scope.persons.Id
});
};
}]);
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p.Name}}
</div>
<div class="ui-widget">
<input type="text" id="autocomp" ng-keyup="complete()">
</div>
</body>
</html>
The above code may have some errors .Its not getting output which i want to have .Can anyone help me out to solve this problem.
Try like this,
HTML:
<div ng-app = "myapp">
<div ng-controller="controller">
<div class="ui-widget">
<input type="text" id="autocomp" auto-complete>
</div>
</div>
</div>
Js:
var app = angular.module("myapp",[]);
app.controller("controller",function($scope){
$scope.availableTags = [
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
}).directive("autoComplete",function(){
return function(scope,element,attrs){
var names =$.map(scope.availableTags,function(value){ return value.Name;
});
element.autocomplete({
source: names
});
};
});
Working jsbin
This is how you should use any jQuery API's in an AngularJS project (i believe). Anytime you are doing DOM Manipulation or jQuery things, it should be placed inside the link: function() {} via directive.
Probably the main problem with your code was that the source: $scope.persons.Id is just a number. The source needs to be an array of Strings (at least as per the documentation). So I seperated all the names from your persons array and placed them in a new array peopleNames
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="vendors/angular.min.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p.Name}}
</div>
<div class="ui-widget">
<input type="text" id="tags" autocomplete-directive>
</div>
<script>
var app = angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
// array of only strings autocomplete
$scope.peopleNames = [];
for(var i = 0, j = $scope.persons.length; i < j; i++) {
$scope.peopleNames.push($scope.persons[i].Name);
}
}]);
app.directive('autocompleteDirective', [function($scope) {
return {
link: function(scope, element, attrs) {
element.autocomplete({
source: scope.peopleNames
});
}
};
}]);
</script>
</body>
</html>
Thank For every one for suggesting me answer.I have also done in another way .It may help to others.
//html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="angularfiles/bootstrap-theme.css"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p}}</div>
<div class="ui-widget">
<input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue">
</div>
</body>
</html>
//js file
var app = angular.module("myapp",['ui.bootstrap']);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
}]);