AngularJS: ng-keypress is not working - javascript

Problem: ng-keypress is not working but if I replace ng-keypress with ng-click then filterSearchData($event) function is working.
HTML:-
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script type="text/javascript" src="ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<body ng-controller="MyCtrl">
<input type="text" ng-keypress="filterSearchData($event)" />
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</body>
</html>
JS:-
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.filterSearchData = function(element) {
console.log(element);
};
});

In this case I recommend to use ng-change instead of ng-keypress.
// HTML:
<input type="text" ng-model="filter" ng-change="filterSearchData()" />
// Controller:
app.controller('MyCtrl', function($scope, $http) {
$scope.filterSearchData = function() {
console.log($scope.filter);
};
});

If for some reason you have to use such an old version of angular, which doesn't support ngKeypress directive, you can always add your own implementation. It's pretty easy to do, for example onKeypress directive:
app.directive('onKeypress', function() {
return {
scope: {
handler: '&onKeypress'
},
link: function(scope, element) {
element.bind('keypress', function(e) {
scope.handler({$event: e});
});
}
};
});
HTML:
<input type="text" on-keypress="filterSearchData($event)" />
Demo: http://plnkr.co/edit/OorXMYKZeXI9Lrc1wrRY?p=preview

Related

unble to show a marker in ng-map, error - [ng:areq] Argument 'myCtrl' is not a function

i want to show one marker in ng-maps, but im getting error saying Error: [ng:areq] Argument 'myCtrl' is not a function, got undefined
code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places&key=AIzaSyDQ2TPHVI30yFa6-yVLf8ffNRTlwWvAmf8"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>
<body ng-app="ngApp" , ng-controller="myCtrl">
<ng-map id="map" zoom="11" center="[{{names.lat}},{{names.longitude}}]">
<marker position="[{{names.lat}},{{names.longitude}}]" title=""></marker>
</ng-map>
<script>
var app = angular.module('ngApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('url')
.then(function (response) {
$scope.names = response.data;
});
});
console.log($scope.names);
</script>
</body>
</html>
You need to remove the ng-app=ngMap from html tag or use that to define the app and remove the ng-app=ngApp.
<html >//removed ng-app from this one
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places&key=AIzaSyDQ2TPHVI30yFa6-yVLf8ffNRTlwWvAmf8"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
</head>
<body ng-app="ngApp" , ng-controller="myCtrl">
<ng-map id="map" zoom="11" center="[{{names.lat}},{{names.longitude}}]">
<marker position="[{{names.lat}},{{names.longitude}}]" title=""></marker>
</ng-map>
<script>
var app = angular.module('ngApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('URL')
.then(function (response) {
$scope.names = response.data;
});
});
</script>
</body>
</html>

Two way data binding don't work in my Angular code

I just see a blank input box, when I should see the $scope.firstname value. Why does not this work?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-controller="MyController">
<head>
<meta charset="UTF-8">
<title>Toto App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>
<input ng-model="firstname">
</body>
</html>
myCtrl.js:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.name = "John";
});
You're doing $scope.name = "John" instead of $scope.firstname = "John"

Append template after element from a directive

Is it possible to insert a template after some element using an angular directive?
I'm trying to insert the "example.html" template after the text-area.
I made a plunker: https://plnkr.co/edit/bdBjmsi2lIbzxtl0Uw89?p=preview
As you can see the HTML is inside the text-area tag (dev tools).
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" data-semver="1.5.0"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="example-form">
<textarea rows="3" id="goal" name="name" data-ng-model="model.name" example="10"></textarea>
<example></example> <!-- Directive used here -->
</form>
</body>
</html>
script.js
app.directive('example', function() {
return {
restrict: 'A',
scope: {},
require: ['^form','ngModel'],
templateUrl: 'example.html',
link: function(scope, element, attrs, ctrls) {
console.log(element);
}
}
});
Thanks!
You didn't use directive anywhere in index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" data-semver="1.5.0"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="example-form">
<textarea rows="3" id="goal" name="name" data-ng-model="model.name" example="10"></textarea>
<example></example> <!-- Directive used here -->
</form>
</body>
</html>

include the template to specific div

I want to load the script template for specific div tag.
In my Demo I have 3 'show' link. If I click any one of the show link it loads script for all 'show' link. But I want to load only the script for that 'show' link which I have clicked.
See the PLUNKER.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
$scope.templateURL = 'my-tmpl';
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective" data-ng-init="names=['1','2','3']">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl">
<p>Hello</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d">
<div ng-include=templateURL></div>
</div>
</div>
</div>
</body>
</html>
If you need to show same things means need to use same template then
use the following code.
Here I have defined a new scope variable.
Look at the updated plunker
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.a = 0; //Here
$scope.showdiv = function(x){
$scope.templateURL = 'my-tmpl';
$scope.a = x; //and Here
};
}]);
})(window.angular);
show <!-- pass x to remember -->
<div id="d" ng-show="a==x"> <!--and check that new variable set as x or not -->
<div ng-include="templateURL"></div>
</div>
If you need to use different template for different link
Then you could use the following code. Here is the plunker.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.names=[{name:'1', template:'tmpl-1', show:false},
{name:'2', template:'tmpl-2', show:false},
{name:'3', template:'tmpl-3', show:false}]
$scope.show = '0';
$scope.showdiv = function(x){
$scope.show = x.name;
};
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="tmpl-1">
<p>Template 1</p>
</script>
<script type="text/ng-template" id="tmpl-2">
<p>Template 2</p>
</script>
<script type="text/ng-template" id="tmpl-3">
<p>Template 3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="show == x.name">
<div ng-include="x.template"></div>
</div>
</div>
</div>
</body>
</html>
Have a look at below code.
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile',
function($scope, $compile) {
$scope.names = [{
'name': '1',
'tmpl': 'my-tmpl1'
}, {
'name': '2',
'tmpl': 'my-tmpl2'
}, {
'name': '3',
'tmpl': 'my-tmpl3'
}];
$scope.showdiv = function(tmpl) {
$scope.templateURL = tmpl;
};
}
]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example12-production</title>
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<script type="text/ng-template" id="my-tmpl1">
<p>Hello1</p>
</script>
<script type="text/ng-template" id="my-tmpl2">
<p>Hello2</p>
</script>
<script type="text/ng-template" id="my-tmpl3">
<p>Hello3</p>
</script>
<div data-ng-repeat="x in names">
show
<div id="d" ng-show="x.isOpen">
<div ng-include="x.tmpl"></div>
</div>
</div>
</div>
</body>
</html>
demo

an Easy Angular code not working

I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source

Categories