What am I doing wrong?
I try write simple example with use book, but I get error.
What needs to be fixed in this example to make it work?
what else write there?
<html>
<head>
<title>page 29</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js">
</script>
<script>
var Ctrl = function ($scope) {
$scope.getName = function() {
return $scope.name
}
}
</script>
<body ng-app>
<div ng-controller="Ctrl">
Напиши свои мысли о ангуляре
<input type="text" ng-model="name">
<h1> angularjs - {{getName()}} </h1>
<p>
</p>
</div>
</body>
</head>
</html>
In console I watch error:
Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.8.3/$controller/ctrlreg?p0=Ctrl
at angular.js:99:1
at angular.js:11787:17
at ea (angular.js:10818:34)
at p (angular.js:10603:32)
at g (angular.js:9942:13)
at g (angular.js:9945:13)
at angular.js:9807:30
at angular.js:1968:11
at m.$eval (angular.js:19523:16)
at m.$apply (angular.js:19622:20)
Solution - First example:
<html>
<head>
<title>page 29</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js">
</script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('Ctrl', ['$scope', function($scope) {
//var Ctrl = function ($scope) {
$scope.getName = function() {
return $scope.name
}
}]
)
</script>
<body ng-app="myApp">
<div ng-controller="Ctrl">
Напиши свои мысли о ангуляре
<input type="text" ng-model="name">
<h1> angularjs - {{getName()}} </h1>
<p>
</p>
</div>
</body>
</head>
</html>
Related
hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>
I am trying to create the sample angular application, where I have initialized an angular application and rendering a list defined in the controller, but I am not getting anything in output, and even not getting any error in javascript console.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<ul>
<li ng-repeat="i in listctrl.list">{{i}}</li>
</ul>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
var list = ['A','B','C','D'];
})
</script>
</body>
</html>
You should have listctrl.list instead of var list = ['A','B','C','D'];
listctrl.list = ['A','B','C','D'];
DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<ul>
<li ng-repeat="i in listctrl.list">{{i}}</li>
</ul>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = ['A','B','C','D'];
})
</script>
</body>
</html>
this is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>index</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="data:;base64,=">
<style>
</style>
</head>
<body>
<ul class="papa">
<li>input</li>
<li>output</li>
</ul>
<ng-view></ng-view>
<script>
var app1 = angular.module('myApp', ['ngRoute']);
app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/1_input', {
controller: 'input_control',
templateUrl: '/1_input.html'
})
.when('/2_output/:firstnamehh/:lastnamehh', {
controller: 'output_control',
templateUrl: '/2_output.html'
})
.otherwise({redirectTo:'/1_input'});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}]);
app1.controller('input_control',function($scope, $location){
//$scope.init_table = {name1:"", name2:""};
//$scope.score_card = [];
//
$scope.loadView2 = function(){
// $scope.score_card.push({
// name1: $scope.firstnamehh,
// name2: $scope.lastnamehh
// })
// console.log($scope.score_card);
$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.score_card;
//$location.path('/2_output/'+$scope.firstnamehh+$scope.lastnamehh+$scope.score_card);
//$location.path('/2_output/'+$scope.score_card);
}
});
app1.controller('output_control',function($scope, $routeParams){
$scope.name1=$routeParams.firstnamehh;
$scope.name2=$routeParams.lastnamehh;
//$scope.name2=$routeParams.({?name1=$scope.firstnamehh});
//$scope.out_score=$routeParams.score_card;
//$scope.name3 = $routeParams[score_card];
});
</script>
</body>
</html>
this is the 1_input.html
<!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>1_input</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
First name: <input type="text" ng-model="firstnamehh"/> <br/>
Last name: <input type="text" ng-model="lastnamehh"/> <br/>
<button ng-click="loadView2()">to output page</button>
</body>
</html>
this is the 2_output.html
<!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>2_output</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
From View2.
<ul>
<li>{{name1}}</li>
<li>{{name2}}</li>
<!-- <tr ng-repeat="aa in score_card">
<td>{{aa.name1}}</td>
<td>{{aa.name2}}</td>
</tr> -->
</ul>
</body>
</html>
hello guys, i'm new to angularjs and looking for some help!. What I'm trying is, making firstnamehh and lastnamehh as a list and pass it to 2_output.html and finally print it out in a table. The part I'm struggling is what should i put after $routeParams and $location.path().
$routeParams.???
..
$location.path('/2_output/'+$scope.???);
any advice would be appreciated!! thank you for reading this question
You can achieve this by using service
app.factory('DataService', function() {
var appData = {}
function set(data) {
appData = data;
}
function get() {
return appData;
}
return {
set: set,
get: get
}
}
In your input_control you can set the data to the service :
DataService.set(shredData);
In your output_control get the data from ther service :
$scope.appdata = DataService.get();
Inject DataService in the controllers by passing it as a parameter
app.controller('input_control', ['DataService', function($scope, $location, DataService){
//Your logic
}]);
There is a nice solution here for How to make a On/Off button in Ionic
Here's a demo from Codepen
and the code pasted here:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
$scope.someFunction = function(){
alert('I am pressed')
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
My question is how to execute someFunction() on the same ng-click event of the Confirm button which could be like this ng-click="someFunction() && button.clicked=!button.clicked" ?
Instead of using the ; separator, you could move all the logic into someFunction(), and set that function as the expression to the ng-click attribute:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.buttonOn = false;
$scope.someFunction = function() {
$scope.buttonOn = (!$scope.buttonOn);
alert('I am pressed');
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-click="someFunction()" ng-class="buttonOn?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
This plunker shows a google map.
http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview
<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<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"></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-map center="[40.74, -74.18]"></ng-map>
</body>
</html>
I would like to know the coordinates of specific points on the map. If the user right-click on the mouse button on any points on the map, an alert will appear showing the coordinates.
The code uses angularjs and the ng-map module. http://ngmap.github.io/
I think you should add an event listener and then show the coordinates inside that event like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Simle Map</title>
<meta name="description" content="Simple Map">
<meta name="keywords" content="ng-map,AngularJS,center">
<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"></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>
var app = angular.module('myApp', ['ngMap']);
app.controller('EventDomListenerController', function($window) {
var vm = this;
vm.showAlert = function(event, args) {
$window.alert(event.latLng.lat()+', '+event.latLng.lng());
}
});
</script>
</head>
<body ng-controller="EventDomListenerController as vm">
<ng-map center="[40.74, -74.18]" on-click="vm.showAlert()"></ng-map>
</body>
</html>
Live Plunker