I would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Related
I am implementing an online form-builder type thing. I need to use Jquery-ui drag and drop in angular-dragdrop.
I have two containers, one on the left that keeps all the controls and on the right is the place where I can drop them. Now what I need is I don't want to get removed the original control from left container. I tried simple code uptil now as:
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
<meta charset="utf-8">
<title>Angular drag and drop</title>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="../components/jquery.min.js"></script>
<script src="../components/jquery-ui.js"></script>
<script src="../components/angular.js"></script>
<script src="../src/angular-dragdrop.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="mainCtrl" style="height:600px;">
<div class="col-sm-4" style="background-color:green" data-drag="true" data-drop="false" data-jqyoui-options="{revert: revertCard}" jqyoui-draggable="{animate:true}">
<div>
<button class="btn btn-primary">Hello world</button>
</div>
</div>
<div class="col-sm-8" style="background-color:grey; height:100%" data-drop="true" data-jqyoui-options jqyoui-droppable="{multiple: true}">
</div>
</div>
</body>
</html>
<script>
var app = angular.module('myapp', ['ngDragDrop']);
app.controller('mainCtrl', function ($scope) {
});
</script>
I tried helper:clone in data-jqyoui-options but it did not work. It did not allow me to drag the element. The control is dragged but it comes back to its original place.
Requirement:
I need control to be copied to right container keeping the original.
In my current case my original control can be dragged anywhere on the webpage. I just want to restrict it in it's parent container or the droppable right container.
i tried many time to run this code but every time it appear in a bad manner i want angular make its affect like this demo http://wowslider.com/angular-slider-collage-demo.html. please help me i tried many time without good result.can you put aworked link to this demo
Blockquote
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>
I'm running a simple Firebase App with only 3 files. When I run in the browser I get this error when trying to connect to my firebase DB:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24firebaseObjectProvider%20%3C-%20%24firebaseObject
Here is my app.js:
(function() {
var app = angular.module("scheduleApp", ['firebase']);
app.controller('MainController',['$scope','$firebaseObject',function($scope, $firebaseObject) {
var ref = new Firebase("https://gajobs.firebaseio.com/");
$scope.data = $firebaseObject(ref);
}]);
})();
Here is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="scheduleApp" >
<head>
<meta charset="UTF-8">
<title>GA Jobs</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<div class="page-header text-center">
<h1>GA Job Board</h1>
</div>
<div class="row times">
<div class="col-xs-4 text-center">
<h2>Contact</h2>
<div class="time-slot">
<input type="checkbox" id="contact">
<label for="contact">Tableu</label>
</div>
</div>
</div>
<p class="text-center">
Reset
</p>
</div>
</body>
</html>
Not sure what is wrong here, it seems to not like the $firebaseObject that I am trying t use...
As mentioned in the comments you're using an old version of AngularFire.
$firebaseObject and $firebaseArray were introduced in 1.0.
In 0.8 you have to use $firebase(ref).$asObject(), but please don't use this old version as it is not supported.
I have a mock website that I'm working on as a proof of concept. I'm using a mixture of HTML5, Bootstrap, and AngularJS.
Everything was going well until I added some AngularJS code, then the right-click menu stopped working in Chrome. (I tested it and its working in IE.) Otherwise the page is working exactly as expected.
I've included the HTML and the Angular-related JS below. Any searches I can think to do for a solution bring up totally unrelated answers. Any help would be much appreciated.
<DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
Hello World
</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="public/css/bootstrap.min.css">
<script src="public/js/jquery.min.js"> </script> <script src="public/js/bootstrap.min.js"> </script> <script src="public/js/angular.min.js"> </script> <script src="public/js/dragdrop.js"> </script>
</head> <body data-ng-app="testapp" data-ng-controller="testappCtrl"> <div class="container-fluid">
<div class="col-md-2 ">
<img src="http://th07.deviantart.net/fs70/PRE/i/2014/004/5/3/battle_power_sword_by_ittoogami-d70wvph.jpg" class="img-responsive img-rounded" draggable="true" ondragstart="drag(event)" id="1">
</img>
</div>
<div class="col-md-2 ">
<div style="border: 5px solid" ondragover="allowDrop(event)" ondrop="drop(event)">
</div>
</div>
<div class="col-md-4 ">
<p>
Name:
<input type="text" class="form-control" data-ng-model="name">
</p>
<p>
{{name}}
</p>
</div>
</div>
<script src="public/js/testapp.js">
</script>
</body>
</html>
Here's the AngularJS code:
var app = angular.module('testapp', []);
app.controller('testappCtrl', function($scope){
$scope.name = "";
});
I made the changes to the tags suggested by Semicolon and everything is working again.
I can't seem to find a way to get the javascript to take the inputted name I put in the box to make it appear where the paragraph is as output when the onblur event happens.
<!DOCTYPE html>
<!--
INFX1606 - Starter kit for Assignment 5.
-->
<head>
<meta charset="utf-8">
<meta name="author" content="Joey Fultz">
<meta name="description" content="Assignment 5">
<title>First Swing at Javascript</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="all">
<div class="title">
<h2>Javascript</h2>
</div>
<div>
<h3>Name and Banner</h3>
</div>
<span>
<label for="namebanner">Name:</label>
<input type="text" id="namebanner" name="namefield" onblur="showname() value">
</span>
<p id="p1"></p>
</div>
</body>
</html>
function showname() {
var x = document.getElementById("namebanner");
x.value = x.value.to("p1");
}
I want to know why my javascript is wrong and why it won't show my name when the onblur event happens.
This is quite easily done with JQuery
<input type="text" id="namebanner" name="namefield" />
<script>
$(function(){
$('#namebanner').blur(function(){
$('#p1').text( $(this).val() );
});
});
</script>
or in plain javascript
<script>
function showname(){
var x = document.getElementById("namebanner");
document.getElementById("p1").innerHTML = x.value;
}
</script>