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>
Related
Some thing is wrong. It is showing cannot read properties of null (addEventListener) on the console. please help. I have created an input field and a button. I am trying to get the value from the input field and going to put them in an array taskStorage.
'use strict'
let taskStorage = [];
// input declarations
const field = document.getElementById('addTodoString1').value;
const addTaskBtn = document.getElementById('addMoreBtn');
addTaskBtn.addEventListener('click', ()=> {
taskStorage.push(field.value);
console.log(taskStorage);
})
<!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>Palmdale To Do</title>
<link rel="stylesheet" href="style/landscape.css">
</head>
<!-- create a to do list -->
<!-- create an empty array -->
<!-- push items to an array using shift -->
<body>
<section id='main'>
<section class="header">
<h3>To Do List</h3>
</section>
<section class="inputFieldSection">
<div class="inputsFieldBox">
<input type="text" id='addTodoString1' placeholder="list your to do here">
</div>
<div class="btnBox">
<button class="addMoreBtn">
Add
</button>
</div>
</section>
</section>
<section id="result">
<h3>results will display here.
</h3>
</section>
<script src="script.js"></script>
</body>
</html>
You need to provide "id attribute" to button instead of class.
and you need to change const field = document.getElementById('addTodoString1').value; to const field = document.getElementById('addTodoString1');
let taskStorage = [];
// input declarations
const field = document.getElementById('addTodoString1');
const addTaskBtn = document.getElementById('addMoreBtn');
addTaskBtn.addEventListener('click', ()=> {
taskStorage.push(field.value);
console.log(taskStorage);
})
<!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>Palmdale To Do</title>
<link rel="stylesheet" href="style/landscape.css">
</head>
<!-- create a to do list -->
<!-- create an empty array -->
<!-- push items to an array using shift -->
<body>
<section id='main'>
<section class="header">
<h3>To Do List</h3>
</section>
<section class="inputFieldSection">
<div class="inputsFieldBox">
<input type="text" id='addTodoString1' placeholder="list your to do here">
</div>
<div class="btnBox">
<button id="addMoreBtn">
Add
</button>
</div>
</section>
</section>
<section id="result">
<h3>results will display here.
</h3>
</section>
<script src="script.js"></script>
</body>
</html>
That is because addTaskBtn is null, and it's null because there is not element in you code with the id "addMoreBtn".
Either replace class="addMoreBtn" with id="addMoreBtn" or use document.querySelector('.addMoreBtn') to get the element as a class
Also remove .value from this line:
const field = document.getElementById('addTodoString1').value;
'use strict'
let taskStorage = [];
// input declarations
const field = document.getElementById('addTodoString1');
const addTaskBtn = document.querySelector('.addMoreBtn');
addTaskBtn.addEventListener('click', ()=> {
taskStorage.push(field.value);
console.log(taskStorage);
})
<!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>Palmdale To Do</title>
<link rel="stylesheet" href="style/landscape.css">
</head>
<!-- create a to do list -->
<!-- create an empty array -->
<!-- push items to an array using shift -->
<body>
<section id='main'>
<section class="header">
<h3>To Do List</h3>
</section>
<section class="inputFieldSection">
<div class="inputsFieldBox">
<input type="text" id='addTodoString1' placeholder="list your to do here">
</div>
<div class="btnBox">
<button class="addMoreBtn">
Add
</button>
</div>
</section>
</section>
<section id="result">
<h3>results will display here.
</h3>
</section>
<script src="script.js"></script>
</body>
</html>
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>
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
I'm trying to use owl carousel in my new project but it seems the owl carousel isn't working, i have tried with the above code dont know where im going wrong please can any one help me so that it will help me to fix the issue, since im new to this field im unable to solve the issue,please can any one help me out in this
remove <script src="jquery.min.js"></script> from last
and initialize Carousel like below
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
or try this code
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></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.