I am trying to bind data from angularjs to HTML page but it scope of the data is not showing on the html page.
(function(){
angular.module('app',[])
.controller('appController',appController)
function appController($http, $scope){
var $ctrl = this;
this.searchLocations = ['Hamburg','Leipzig','Berlin','Düsseldorf',"Frankfurt am Main","Köln","München","Münster, Westfalen","Stuttgart"];
this.searchWords = ['SAP','MCSA','Online Marketing','Projektmanagement','SAP CO',"SAP FI","Bilanzbuchhalter","ITIL","PRINCE2","Six Sigma","SCRUM"];
console.log(this.searchWords)
$ngOninit();
function $ngOninit(){
}
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!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>Line Graph</title>
</head>
<body ng-app="app" ng-controller="appController as ctrl" >
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 div-left col-md-6 division ">
<div class="form-group">
<label for="sel1">Select <b>SearchWord</b> to create line-graph:</label>
<select class="form-control" ng-model="selectedWord">
<option ng-repeat="word in ctrl.searchWords" value="{{word}}" >{{word}}</option>
</select>
</div>
</div>
{{ctrl.searchLocations}}
</div>
</div>
</body>
</html>
Here i want searchWord and searchLocation on options of select element. But bindings of data is not available on html html page.
use your ng-model="selectedWord" instead {{ctrl.searchLocations}} to view the selected option from dropdown.
(function(){
angular.module('app',[])
.controller('appController',appController)
function appController($http, $scope){
var $ctrl = this;
this.searchLocations = ['Hamburg','Leipzig','Berlin','Düsseldorf',"Frankfurt am Main","Köln","München","Münster, Westfalen","Stuttgart"];
this.searchWords = ['SAP','MCSA','Online Marketing','Projektmanagement','SAP CO',"SAP FI","Bilanzbuchhalter","ITIL","PRINCE2","Six Sigma","SCRUM"];
console.log(this.searchWords)
$ngOninit();
function $ngOninit(){
}
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!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>Line Graph</title>
</head>
<body ng-app="app" ng-controller="appController as ctrl" >
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 div-left col-md-6 division ">
<div class="form-group">
<label for="sel1">Select <b>SearchWord</b> to create line-graph:</label>
<select class="form-control" ng-model="selectedWord">
<option ng-repeat="word in ctrl.searchWords" value="{{word}}" >{{word}}</option>
</select>
</div>
</div>
{{selectedWord}} selectedWord
</div>
</div>
</body>
</html>
Related
I have a button that when clicked calls a function that randomizes a number inside of it. Then I have another button that when it's clicked it clones the first button.
What I want to do is to turn the cloned button independent from the original (while using the same function), but when it's clicked, instead of calling the function and randomizing its own number, it randomizes it's parent's. How can I make this work? I'm using jQuery.
$(document).ready(function() {
$('body').on('click', '#button1', function() {
document.querySelector('#num1').textContent = Math.floor(Math.random() * 6 + 1);
});
$('#clone1').on('click', function() {
console.log("lolo");
const place = $('#place');
$('#block1').clone().appendTo(place);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="section1">
<div class="block" id="block1">
<button class="button" id="button1">
<div class="num" id="num1">1</div>
</button>
</div>
<div class="section2">
<button class="clone1" id="clone1">clone1</button>
<div class="place" id="place">
</div>
</div>
</body>
</html>
Don't use IDs, which are supposed to be unique, use classes.
Then the event handler can use $(this) to find the element with the class inside the button.
$(document).ready(function() {
$('body').on('click', '.button1', function() {
$(this).find(".num1").text(Math.floor(Math.random() * 6 + 1));
});
$('#clone1').on('click', function() {
console.log("lolo");
const place = $('#place');
$('#block1').clone().appendTo(place);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="section1">
<div class="block" id="block1">
<button class="button button1" id="button1">
<div class="num num1">1</div>
</button>
</div>
<div class="section2">
<button class="clone1" id="clone1">clone1</button>
<div class="place" id="place">
</div>
</div>
</body>
</html>
It was because the button to be edited was being selected by the id:
document.querySelector('#num1').textContent = Math.floor(Math.random() * 6 + 1);
Instead, have the handler edit the event target:
$('body').on('click', '#button1', function(event) {
event.target.textContent = Math.floor(Math.random() * 6 + 1);
});
$(document).ready(function() {
$('body').on('click', '#button1', function(event) {
event.currentTarget.querySelector('.num').textContent = Math.floor(Math.random() * 6 + 1);
});
$('#clone1').on('click', function() {
console.log("lolo");
const place = $('#place');
$('#block1').clone().appendTo(place);
});
});
.face {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="section1">
<div class="block" id="block1">
<button class="button" id="button1">
<div class="num" id="num1">1</div>
<div class="face">😁</div>
</button>
</div>
<div class="section2">
<button class="clone1" id="clone1">clone1</button>
<div class="place" id="place">
</div>
</div>
</body>
</html>
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>
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>
I have problem with jQuery change connected with select tag. It fire twice, second time returning empty array. jQuery or JS is NOT included twice, already checked.
I would be very grateful for any help in this area :)
JS
$(".select-car").on("change", function(){
var cars = [];
var carType = $(this).val();
$.getJSON("js/cars.json", function(data) {
$.each(data, function(i, item) {
// console.log(item);
if(item.type === carType) {
cars.push(item);
}
});
});
console.log(cars);
});
HTML
<!DOCTYPE html>
<html lang="pl">
<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">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Wyporzyczalnia samochodów</title>
</head>
<body>
<main class="container main-container">
<div class="row select-car">
<div class="col-md-12 header">
<h2 class="page-header">Wybierz typ samochodu</h2>
<form action="">
<select name="cartype" class="form-control select-car">
<option value="" selected="true" disabled>---</option>
<option value="camper">Camper</option>
<option value="limuzyna">Limuzyna</option>
<option value="osobowy">Osobowy</option>
</select>
</form>
</div>
</div> <!-- Select car -->
<div class="row avaible-cars">
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You have two classes .select-car
<div class="row select-car">
and in
<select name="cartype" class="form-control select-car">
Which is causing this to be called twice. And hence binded the change event twice.
I'm having an issue with ng-repeat on an array of objects:
dummy.json
[
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
]
I can get the number of objects({{factions.length}} or individual item {{factions[0].name}}) and print them individually, but the ng-repeat doesn't create multiple options in the select. I see some other versions of the same question, but they aren't resolved.
I'm including the controller in the body. The scope variable is available, but I'm missing something... Please take a look. Thanks in advance.
tree.js
'use strict';
angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];
//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat"faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>
You are missing the = character between ng-repeat attribute and its value.
'use strict';
angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];
//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat="faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>