I have an issue with ng-disabled it works fine with chrome and firefox but the problem with IE 11
<!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">
<title>My first app</title>
</head>
<body ng-app="myApp" ng-controller="myController as vm">
<input type="text" ng-model="vm.name" />
<button ng-disabled="vm.isBtnDisabled()">Button</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",["$scope", function($scope){
this.name="";
this.isBtnDisabled=function(){
return this.name.trim().length==0;
}
}]);
</script>
</body>
</html>
Please let me know if i had made any mistake, Thanks.
you can add prototype method trim to work with IE11
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
var app=angular.module("myApp",[]);
app.controller("myController",["$scope", function($scope){
this.name="";
this.isBtnDisabled=function(){
return this.name.trim().length==0;
}
}]);
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController as vm">
<input type="text" ng-model="vm.name" />
<button ng-disabled="vm.isBtnDisabled()">Button</button>
</div>
Related
I am new to Angular JS, when I tried to get and print out some JSON data using $scope variable, but double curly braces just don't work as i thought it would do.
HTML:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
JS:
$(window).on("load",function () {
var $myApp = angular.module('myApp',[]);
$myApp.controller('myController',function ($scope) {
$scope.p =
{
"name":"a",
"id":"1"
}
});
});
result:
haha {{ p.name }}
Update:
HTML file:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
JS file:
var $myApp = angular.module('myApp',[]);
$myApp.controller('myController',function ($scope) {
$scope.p =
{
"name":"a",
"id":"1"
}
});
And now i got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Remove $(window).on("load",function () {
Change type="javascript" to type="text/javascript" in all <script></script> tags
Angularjs will load it before DOM is loaded
Here is the working code
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08" />
<meta name="author" content="YYQ" />
<meta name="description" content="YYQAngularJS" />
<title>YYQAngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var $myApp = angular.module('myApp', []);
$myApp.controller('myController', function($scope) {
$scope.p = {
"name": "a",
"id": "1"
}
});
</script>
</body>
</html>
$(window).on('load', () => {}) is causing conflict with your angular app.
var $myApp = angular.module('myApp', []);
$myApp.controller('myController', function($scope){
$scope.p = {
"id": 1,
"name": "Angular App working"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-08">
<meta name="author" content="YYQ">
<meta name="description" content="YYQAngularJS">
<title>YYQAngularJS</title>
<script src="Script/angular.js" type="javascript"></script>
</head>
<body ng-controller="myController">
<div> haha {{ p.name }} </div>
<script src="Script/jquery-3.1.1.js" type="javascript"></script>
<script src="Script/index.js" type="javascript"></script>
</body>
</html>
This is a very basic ng-click example. I can't seem to get it to work. Not sure what the issue is. I swear I've used Angular before! Here's a jsbin:
JS Bin
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>{{1 + 2}}</h1>
<button ng-click="alert('hello world')">Click me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Module:
angular.module('app', []);
It will be helpful to you while doing angularjs you should add the controller, In your case, I have created a function and passed a string value to show a message by the alert.
var app=angular.module('app', []);
app.controller('testCtrl',function($scope){
$scope.showalert=function(str){
alert(str);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-strict-di ng-controller="testCtrl">
<h1>{{1 + 2}}</h1>
<button ng-click="showalert('hai this is angularjs click event')"> click Me!..</button>
</div>
Hi I am just learning the AngularJS, and trying to save cookies values
I have two html file
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="helloCtrl">
Hello <input type="text" ng-model="helloText"/>
<input type="button" ng-click = "redirectToTest()" value="Go" />
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-cookies.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp" ng-controller="testCtrl">
Hello {{cookiesText}}
</body>
</html>
test.js
var myApp = angular.module('myApp', ['ngCookies']);
var helloCtrl = myApp.controller('helloCtrl',
function ($scope, $cookies, $window) {
$scope.helloText = "Hello World!"
$scope.redirectToTest = function(){
$cookies.put('hello', $scope.helloText);
console.log("Added hello to cookies : "+ $cookies.get('hello'));
$window.location.href = "test.html";
}
});
var testCtrl = myApp.controller('testCtrl',
function ($scope,$cookies) {
$scope.cookiesText = '';
$scope.init= function(){
$scope.cookiesText = $cookies.get('hello');
}
});
I am adding some text into cookies and redirecting to test.html to display cookies value, but it lost somewhere ?
Is there $window.location.href reset cookies value ?
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
I am following YouTube's tutorial for Sharing Data between Controllers.
For some reason, the two inputs don't return shared data(not bind-able). Can anyone let me know what is wrong in my code?
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/css/app.css?2">
<script src="/bower-foundation/js/vendor/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?2"></script>
<!-- angularjs -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {msg:"I am data from a service"}
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<!-- javascript -->
<script src="/bower-foundation/js/foundation.min.js?3"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.11/fastclick.min.js?2"></script>
<script src="/js/min/app.min.js?3"></script>
</body>
</html>
Its working fine, Take a look at this
Working Demo
HTML
<div ng-app='myApp'>
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
</div>
SCRIPT
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return {
msg: "I am data from a service"
};
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
Also take a look at this stuff
AngularJS - Sharing variables between controllers