I need to alert the path name by clicking the link tag but it's not working for me. Since I am new to angular I am confused about where I went wrong. Can somebody help me with this?
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0-alpha.20" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<script>
var myApp = angular.module('myApp',[]);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
}
}
</script>
</body>
</html>
And here is my plnkr:http://plnkr.co/edit/Cir7Ardx3OVvwPWYJNNv?p=preview
I cleaned up your Plunkr demo and forked it here:
http://plnkr.co/edit/YuinLcjb6OU7VsdSMca9?p=preview
First, I wasn't sure if you intended to target the unstable 2.0 version or not, so I changed it to target the latest stable release of AngularJS (1.3.15). Next, I moved your script to the script.js file and formatted your controller properly.
Now the HTML looks like:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<hr />
{{ name }}
</body>
</html>
and your script looks like this:
angular.module('myApp', [])
.controller("ProductCtrl", ProductCtrl);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
};
}
This is half the battle: making sure that your framework is working correctly. Now, how to show the full path of the selected file? Here are a few links to help you with that (or not, actually):
How to get the full path of the file from a file input
Get file path through type=file
Related
I am starting to learn AngularJS and wanted to try building a simple calculator app, however, whenever I name the ng-app in my html-file, AngularJS stops working.
I tried building a controller, but seem to be doing something wrong when calling it or putting it to use.
I tried putting the files in the XAMPP webfolder because I thought it might not load from my hard drive, but to no avail.
(please disregard all the half-finished rest, right now I just want to get the controller working)
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<input type="number" ng-model="first" autofocus>
<input type="number" ng-model="second">
<br>
<button onClick="defineOperator('+')">+</button>
<button onClick="defineOperator('-')">-</button>
<button onClick="test()">TEST</button>
<br>
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
<script src="http://localhost/calculator/scripts/app.js" type="text/javascript"></script>
</body>
</html>
And the js:
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.defineOperator = function(choice) {
switch (operator) {
case +:
return first + second;
break;
default:
}
};
$scope.testOperator = function(click) {
alert("You chose " + operator);
};
});
Any help would be greatly appreciated.
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.first="hello";
});
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
Have a look at this. One thing you have not closed the tag in which angular is defined.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
You forgot to put > in above line.
Replace it with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
You forgot to end the script tag with >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
if you want to change the app-name in html page you should also change the app name in the js file :
angular.module('calculatorApp', [])
<html ng-app="notesapp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Edit
For making small code like this work, we can actually define an empty ng-app.
Eg: <html ng-app = "">
If you however want to define ng-app with some value, we need to load that ng-app in javascript. It can be done in a separate js file or in the same html file with <script></script> tag. Please see below:
<script>
var app = angular.module('notesapp', []);
</script>
Please close the script tag in your head. Also angular needs ng-app for its functioning. Please use ng-app on the tag which encloses your angular content.
<html ng-app="notesapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<script>
var app = angular.module('notesapp', []);
</script>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Also, as you know, Sublime is just an editor. It has nothing to do with angular. Cheers.
I'm copying my code exactly from an egghead.io tutorial but it isn't working. The angular expression isn't posting to the view properly (it posts with the {{}} rather than evaluating). It works if I remove ng-controller from the <body> and the value "app" from ng-app in the <html> so I can't figure out where to pinpont the problem. I've tried moving the script for the angular module/controller all over the html page (header, bottom of page, etc.) and no luck.
As a side question I'm wondering if Stackoverflow is the proper place to post this. Supposedly you're not supposed to use the 'code-review' tag and reviews of "other-wise working code" belongs on codereview.stack. My code is working sooo...
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller(FirstCtrl, function FirstCtrl()[
var first = this;
first.greeting = "First";
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller("FirstCtrl", [ function () {
var first = this;
first.greeting = "First";
}
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
I made a slight change to your code.
The Controller name needed double qoutes around it see "FirstCtrl" also you had a missing square bracket and closing bracket. Copy and past the above code it should work.
It works for me. :)
Your copying went wrong somewhere , controller name should be a string
Change:
.controller(FirstCtrl...
to
.controller('FirstCtrl'...
You should have seen errors thrown in console to give you clues about this
Today is the first when i started reading about Angular JS and I tried to do a very basic thing after reading from a tutorial.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" data-ng-app="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
I downloaded and added the angular js library from GitHUB 1.4.x(latest). I expect the name to be written on the fly when user types in the textbox but nothing happens. What am i missing for this basic set up ?
P.S. - I am using an HTML page in Visual Studio 2010.
Some minor adjustments to your code, and it works just fine:
<html ng-app="">
<head>
<title></title>
</head>
<body>
Name:
<br />
<input type="text" ng-model="name" /> {{ name }}
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</body>
</html>
A working code pen can be seen here: http://codepen.io/anon/pen/jPWyaR
JSFIDDLE http://jsfiddle.net/seadonk/aze39fjq/
change the html tag to: <html ng-app>
change your input directive to data-ng-model="name"
<html ng-app>
<head>
</head>
<body>
Name:
<br />
<input type="text" data-ng-model="name" /> {{ name }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
I note a few things.
a) No reference to script file which should contain an angular module declaration.
b) The input references an angular app named "name" but it is immediately closed
c) No controller declared
d) data-ng-app needs older version of angular. I suggest use 1.3.5
I will do the following corrections to get it working.
http://plnkr.co/edit/rfXgNl6ugqSmlwXOaHIN?p=preview
<!DOCTYPE html>
<html >
<head>
<title>
My First Angular App
</title>
<script src="https://code.angularjs.org/1.3.15/angular.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('name', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</head>
<body ng-app="name">
Name:
<br />
<div ng-controller="MainCtrl">
<input type="text" ng-model="name"/>
{{name}}
</div>
</body>
</html>
The following html page works when ng-app="" but not when ng-app="MyApp". How can I make this page work with ng-app="MyApp"?
The code in this page will print out the text being input as user types into the textbox.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name" value="John"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
I tried including following JavaScript in this page, but still it did not work.
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyApp']);
});
</script>
UPDATE 1
The following script did the trick, which I picked up after reading various responses to my post. I added this just before the closing 'body' tag.
<script>
angular.module('MyApp', []);
</script>
You need to declare your module in Angular. You must declare it in javascript whithin your file:
angular.module('MyApp', []);
Here you have a good starting tutorial:
http://tutorials.jenkov.com/angularjs/index.html#angularjs-hello-world