I have divs that are in different locations and are able to be moved and have a textfield. I am using a JSON file to store the coordinates for each different div as well as any text. I am also using angularjs for the interaction of the page. I got the draggable part down but I am having issues with saving the new coordinates as well as text. The user is suppose to click the save button and everything should be updated. I am using http.get to place the JSON file onto the page. I am stuck on how to use http.post to update the divs.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="container">
<head>
<meta charset="utf-8">
<title>efoli</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="containers.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="Style/design.css">
</head>
<body ng-controller="ContainerController as contain">
<div id="grid"></div>
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand">NAME</a>
<form ng-submit="submit()">
<input type="submit" id="submit" value="save"/>
</form>
<ul class="nav navbar-nav navbar-right">
<li class=dropdown>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="drag resize" ng-repeat="product in contain.block" style="position:absolute; top:{{product.x}}; left:{{product.y}}" movement>
<h1>{{product.title}}</h1>
<textarea ng-model="newText" style="display:table-cell; width:inherit; height:inherit"></textarea>
</div>
</body>
</html>
container.js
(function() {
var app = angular.module('container', []);
app.controller('ContainerController', ['$http', function($http) {
var contain = this;
contain.block= [];
$http.get('data.json').success(function(data){
contain.block = data;
});
}]);
app.directive('movement', function(){
return {
restrict:'A',
link: function() {
$('.drag').draggable({grid:[25,25]});
$('.resize').resizable({grid:25});
}
}
});
}) ();
data.json
[
{ "title" : "Test1",
"text" : "",
"x" : "151px",
"y" : "350px" },
{ "title" : "Test2",
"text" : "",
"x" : "151px",
"y" : "700px" },
{ "title" : "Test3",
"text" : "",
"x" : "351px",
"y": "525px"},
{ "title" : "Test4",
"text" : "",
"x" : "251px",
"y" : "525px"},
{ "title" : "Test5",
"text" : "",
"x" : "451px",
"y" : "525px"}
]
Related
i want to make dynamic code
strong text
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(x) {
$scope.childrens=$scope.adults[x].Name;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList(0)">cat1</a>
</li>
<li class="list-group-item" ng-click="updateList(1)"><a ng-click="updateList(1)">cat2</a>
</li>
<li class="list-group-item" ng-click="updateList(2)"><a ng-click="updateList(2)">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in adults">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>
guys, i am facing some issue in angular js. I want to display categories list on the left side and display product name on right side panel when you click on cat1 display all include categories product name.as an example when you click cat1 that time display name as "pro1" and "pro3" for reference check image
is it possible in angular.ja 1.6.x? enter image description here
var shop = {
categories: [
'cat1','cat2','cat3'
],
products: [
{
name: 'pro1',
categories: ['cat1']
},
{
name: 'pro2',
categories: ['cat2']
},
{
name: 'pro3',
categories: ['cat1','cat3']
}
]
};
Check the code below :
// angular.bootstrap(document.getElementById('app'), ['app']);
var app=angular.module("App",[]);
app.controller("AppCtrl",function($scope){
$scope.adults = [
{
"Name": "pro1",
"categories": [
'cat1'
]
},
{
"Name": "pro2",
"categories": [
'cat2'
]
},
{
"Name": "pro3",
"categories": [
'cat3','cat1'
]
}
];
$scope.Name =$scope.adults[0].Name;
$scope.updateList = function(cat) {
$scope.childrens = $scope.adults.filter(function(adult){
return adult.categories.includes(cat);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- <div id="app">
<div ui-view></div>
</div> -->
<div id="library">
<h1>shop</h1>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html ng-app="App">
<!-- <head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head> -->
<body>
<div ng-controller="AppCtrl" >
<ul>
<li class="list-group-item" ><a ng-click="updateList('cat1')">cat1</a>
</li>
<li class="list-group-item"><a ng-click="updateList('cat2')">cat2</a>
</li>
<li class="list-group-item"><a ng-click="updateList('cat3')">cat3</a>
</li>
</ul>
<div class="col-md-6"><h2>product</h2><br>
<ul>
<li class="list-group-item" ng-repeat="a in childrens">
{{a.Name}}
</li>
</ul>
</div>
</div>
</body>
</html>
So, I'm playing around with AngularJS but now I'm kinda stuck....
I'm trying to split the template into smaller pieces/partials. I've started with the menu bar.
I created a custom directive that loads the template + controller with all the menu items.
HTML index
<!DOCTYPE html>
<html lang="en-us" ng-app="someApp">
<head>
<meta charset="utf-8">
<title>Magazijn</title>
<base href="/">
<!-- Stylesheets -->
</head>
<body>
<main-menu></main-menu>
<div id="page-wrapper" ng-class="globals.currentUser == null ? 'max' : ' '">
<div id="page-inner">
<div class="container">
<div ng-view></div>
</div>
</div>
</div>
<!-- jQuery / Bootstrap / Morris -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.0/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="/assets/js/main.js"></script>
<!-- Angular -->
<script src="https://code.angularjs.org/1.5.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.4/angular-cookies.min.js"></script>
<script src="/angular/app.js"></script>
<script src="/angular/routes.js"></script>
<!-- Services -->
<script src="/angular/services/auth-service.js"></script>
<script src="/angular/services/api-service.js"></script>
<!-- Directives -->
<script src="/angular/directives/menu-directive.js"></script>
<!-- Controllers -->
<script src="/angular/controllers/trucks-index-controller.js"></script>
<script src="/angular/controllers/trucks-show-controller.js"></script>
<script src="/angular/controllers/trucks-history-controller.js"> </script>
<script src="/angular/controllers/monitor-controller.js"></script>
<script src="/angular/controllers/messages-index-controller.js"> </script>
<script src="/angular/controllers/login-controller.js"></script>
JS
(function () {
'use strict';
angular
.module('app')
.controller('menuCtrl' , ['$scope','$timeout', function($scope, $timeout){
$scope.menu = {
"items" : [{
"name" : "Dashboard",
"url" : "/",
"icon" : "fa fa-dashboard fa-3x"
},
{
"name" : "TV Monitor",
"url" : "/monitor",
"icon" : "fa fa-television fa-3x"
},{
"name" : "Trucks",
"url" : "",
"icon" : "fa fa-truck fa-3x",
"childs": [{
"url" : "/trucks",
"name" : "Overview"
},{
"url" : "/trucks/history",
"name" : "History"
}]
}]
};
}])
.directive('mainMenu' , function(){
return {
restrict: 'E',
controller: 'menuCtrl',
templateUrl : '/templates/partial/nav.html'
}
})})();
HTML
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li ng-repeat="m in menu.items">
<i class={{m.icon}}></i>{{m.name}} <span ng-if="m.childs.length > 1" class="fa arrow fa-2x"></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="c in m.childs">
{{c.name}}
</li>
</ul>
</li>
</ul>
</div>
</nav>
And on the index.html I simply call the directive with .
This all works fine except for the dropdown. I'm using mentis, which works fine if I leave all the code # the index page, but stops functioning when I load the html with a directive
This mentis is the library I used.
You need to $compile any dynamic html to make it work correctly: https://docs.angularjs.org/api/ng/service/$compile
This post should help:
Angular JS Directive - Template, compile or link?
also:
http://www.bennadel.com/blog/2794-when-do-you-need-to-compile-a-directive-in-angularjs.htm
I have having error when I try to mock backend with ngmockE2E.
"angularjs [ng:areq] Argument 'fn' is not a function, got string"
When I remove ngMock service, it works fine.
Index.html
<!doctype html>
<html lang="en" ng-app="userApp">
<head>
<meta charset="utf-8">
<title>IT Beams Angular App</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-cookies.js"></script>
<script type="text/javascript" src="js/ui-router.js"></script>
<script type="text/javascript" src="js/angular-resource.js"></script>
<script type="text/javascript" src="js/angular-mocks.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<header id="header">
<div class="logo col-sm-12 col-lg-4">
<h1>logo</h1>
<ul class="nav nav-pills pull-right">
<li><a ui-sref="home" class="btn btn-success" ui-sref-active="btn-warning">Home</a></li>
<li><a ui-sref="login" class="btn btn-success" ui-sref-active="btn-warning">Login</a></li>
<li><a ui-sref="register" class="btn btn-success" ui-sref-active="btn-warning">Register</a></li>
</ul>
</div>
<div class="text-area col-sm-12 col-lg-8">
<h2>Test</h2>
</div>
</header>
<section id="main">
<div class="container">
<div class="row">
<div ui-view></div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<p class="text-center">Copyright IT Beams 2015</p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
app.js
(function(ng){
var userApp = ng.module("userApp", ["ui.router", "ngResource", "ngMockE2E", "ngCookies", "mainCtrl"]);
userApp.config(["$stateProvider", "$urlRouterProvider", "$provide", function($stateProvider, $urlRouterProvider, $provide){
$urlRouterProvider.otherwise( "/" );
$provide.decorator("$httpBackend", ng.mock.e2e.$httpBackendDecorator);
$stateProvider
.state("login", {
url : "/login",
templateUrl : "views/login.html",
controller : "loginCtrl"
})
.state("register", {
url : "/register",
templateUrl : "views/register.html",
controller : "registerCtrl"
})
.state("home", {
url : "/",
templateUrl : "views/home.html",
controller : "homeCtrl"
})
}]);
userApp.run("$httpBackend", function($httpBackend){
var users = [
{ "id" : "1", "username" : "user1#test.com", "password" : "user1" },
{ "id" : "2", "username" : "user2#test.com", "password" : "user2" },
{ "id" : "3", "username" : "user3#test.com", "password" : "user3" },
{ "id" : "4", "username" : "user4#test.com", "password" : "user4" }
];
$httpBackend.whenGET("/login").respond(users);
console.log(testing);
});
})(angular);
Help is appreciated. Thanks
The run block is set up incorrectly.
You are passing a string as the first argument instead of a function:
userApp.run("$httpBackend", function($httpBackend) {
...
});
Hence the error.
It should either be:
userApp.run(function($httpBackend) {
...
});
Or if using the inline array notation like you have with the config block:
userApp.run(["$httpBackend", function($httpBackend) {
...
}]);
I make a menu option which is show on button click .I need to show deleted option on button text.by default "select value" text display.Now if user select any other value it should show on button.
can you please tell me how it is possible ?
Plunker:http://plnkr.co/edit/Fxb3H4mhKXdcdb4zR93h?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="DropdownCtrl">
<div class="btn-group" >
<button type="button" class="btn btn-primary dropdown-toggle" >
Select value <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</div>
</div>
</body>
<script>
angular.module('app', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: true
};
}
</script>
</html>
You can use a $scope variable to keep track of the button text. Instead of making the button text a string ('Select value'), make it a $scope variable with a default value of 'Select value'. Make the dropdown links call a function that updates that $scope variable.
See: plunker
I cannot figure out why the compare function I have and the insert function I have are not working. I believe one part of it might be because the function is never being called by the button? How exactly can I tell that? It does not seem like alerts are working in angular code.
this is my loginHandler.js
(function() {
var app = angular.module('loginHandler', []);
app.controller('LoginController', ['$http' ,function($http){
var database = this;
this.validated = false;
database.dbData = [];
$http.get('/resources/DatabaseObject.json').success(function(data){
database.dbData = data;
});
this.login = function(credentials){
loggedInUser = credentals.username;
validated = true;
$http.get('/resources/DatabaseObject.json').success(function(data){
$scope.dbData.push({"123":{"username":"meph","ip":"123","timeLastLogin":"123"}}, "session");
});
};
this.checkSession = function(){
var ip = "123456";
if(session.ip.equals(123456)){
return true;
}
};
}]);
})();
Neither of the functions are working.... Not the login or the checkSession.
DatabaseObject.json
[{
"users": {
"cra": {
"firstName": "Jn",
"lastName": "it",
"username": "dmph",
"email": "ran61#yahoo.com",
"ip": "192.168.1.1",
"password": "1234",
"computerName": "os",
"prviateKey": "1D3RW12390ASLEWRQ1235"
},
"mus": {
"firstName": "James",
"lastName": "mh",
"username": "ch",
"email": "j61#gmail.com",
"ip": "192.168.1.1",
"password": "11212",
"computerName": "ops",
"prviateKey": "1D3RW12390ASLEWRQ1235"
}
},
"session": {
"123456": {
"username": "crh",
"ip": "123456",
"timeLastLogin": "123456787654"
}
}
}]
and here is my html
<html lang="en" ng-app="gemStore">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Basic Company Template for Bootstrap 3</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS for the 'One Page Wonder' Template -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="script/headerPanel.js"></script>
<script type="text/javascript" src="script/errorHandler.js"></script>
<script type="text/javascript" src="script/loginHandler.js"></script>
<script type="text/javascript" src="script/sessionHandler.js"></script>
</head>
<body ng-controller="NameController as name">
<div ng-controller="ErrorController as errorController">
<div ng-controller="LoginController as loginCtrl">
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container" ng-controller="CredentialsController as credentials">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a class="act" href="#about">About</a>
</li>
<li>Services
</li>
<li>Tutorial
</li>
<li>Features
</li>
<li>Download
</li>
</ul>
<form>
<ul class="nas navbar-na">
<li ng-hide="loginCtrl.checkSession(loginCtrl.dbData.session)"><a>User ID: <input ng-model="credentials.username" type="text"></a></li>
<li ng-hide="loginCtrl.checkSession(loginCtrl.dbData.session)"><a>Password: <input ng-model="credentials.password" type="password" onkeyup="if (event.keyCode == 13) document.getElementById('loginBtn').click()"></a></li>
<li style="color: red;" ng-show="loginCtrl.checkSession(loginCtrl.dbData.session)"><h2>LOGGED IN AS {{credentials.username}}</h2></li>
</ul>
<ul class="nav navbar-nav">
<li><a ng-click="loginCtrl.login(credentials)" method="post" novalidate type="submit" href="index.html" id="loginBtn">Login</a></li>
</ul>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<div style="color: red;" ng-repeat="login in loginCtrl.dbData">
<h1>{{login.session}}</h1>
</div>
</nav>
</div>
<div style="color: red;" ng-repeat="errorArray in errorController.errors">
<h1>{{errorArray.error}}</h1>
</div>
</div>
<div class="header-image">
<div class="headline">
<div class="container">
<h1>{{name.name}}</h1>
<h2>The Impossible!</h2>
</div>
</div>
</div>
</body>
</html>
I am not sure if that submit button is ok or not.... Bah! Sorry.... Im really bad at this stuff! I hope someone can help me better understand it, I have been trying different things without anything working.
http://plnkr.co/edit/zYSFmQSU83FMC9UcXhM4?p=preview
The push doesn't work, because you have database.dbData, but trying to push into $scope.dbData (which doesn't exist).
The comparing doesn't work, because you compare against session.ip (which isn't defined anywhere).
I believe it's because you are using this. instead of $scope.
Also, you aren't passing $scope to your parameters...
app.controller('LoginController', ['$http' ,function($http){
It should be:
app.controller('LoginController', ['$http, $scope' ,function($http, $scope){
And down below you should be using: (not this)
$scope.login = function () { /* ... */ };
$scope.checkSession = function () { /* ... */ };