I am trying to make an empty grid using angularJS, I am 2 days new to it so I dont know much, this is what makes sense to me:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var app = angular.module('calendar',[]);
app.controller('WeekMakerCtrl', function(){
for(i = 0; i < 12; i++){
this.rows.push("<tr> <tb>1</tb> <tb>2</tb> </tr>");
}
});
</script>
</head>
<body>
<div ng-controller="WeekMakerCtrl as week">
<table>
<p ng-repeat="row in week.rows">{{row}}</p>
</table>
</div>
</body>
</html>
but it doesn't display anything, what is wrong with it?
PS: please don't over complicate an answer, remember that I am a newbie. thanks a lot
The model (rows) should contain data, not markup. The view template (the HTML) should contain the HTML. It should be something like:
this.rows.push({colA: 1, colB: 2})
Then your HTML would look like:
<table>
<tr ng-repeat="row in week.rows">
<td>{{row.colA}}</td>
<td>{{row.colB}}</td>
</tr>
</table>
Per PSL's comment, you may need also to change your ng-app attribute to ng-app="calendar", and you need to initialize this.rows to an empty array in the controller (this.rows = []) before you can .push on it.
Related
I am trying to select an element within an element, essentially. The HTML looks something like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="first">
<div></div>
<div><!-- the element I want to select --></div>
</div>
</body>
</html>
I have tried one method, which looks like this:
function findFirstDescendant(parent, tagname) {
parent = document.getElementsByClassName(parent)[0];
var descendants = parent.getElementsByTagName(tagname);
if (descendants.length)
return descendants[0];
return null;
}
and also this:
document.getElementsByClassName("first")[0].getElementsByTagName("div")[1];
Neither work, as the method seems to be outdated. I would like to keep jQuery out of this, but it is acceptable if there is no other solution.
You should definitely use querySelector to take advantage of CSS selectors...
var el = document.querySelector('.first > div:nth-child(2)');
console.log(el);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="first">
<div></div>
<div>Hello!</div>
</div>
</body>
</html>
But obviously, you can use this more classical solution too:
var el = document.getElementsByClassName('first')[0].getElementsByTagName('div')[1];
console.log(el);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="first">
<div></div>
<div>Hello!</div>
</div>
</body>
</html>
Sorry for wasting anyone's time. I feel a little dumb for not thinking of this sooner. I fixed the problem by adding a 250ms delay to the script, as it was being executed before the page fully loaded. My code was similar to this:
setTimeout(function() {
var a = document.getElementsByClassName("card-player")[0].getElementsByTagName("div")[0];
console.log(a);
}, 250);
You could also add in more variables if you wanted to debug or log more information like this:
setTimeout(function() {
var a = document.getElementsByClassName("first")[0];
var b = a.getElementsByTagName("div")[1];
var c = b.getElementsByTagName("div")[1];
var d = b.getElementsByTagName("div")[2];
}, 250);
Iam newbie in Angular js,I have started working on few snippets in angular but didnt get answers while working with two snippets.I have been scratching my head to understand ,Any help is greatly appreciated.In the below code whenever I am pressing the button the value isnt getting changed
<html ng-app="secondmodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
var demo = angular.module("secondmodule", []);
demo.controller("controlsample", function() {
var app = this;
app.myname = "xyz";
app.mysurname = "mno";
app.myaddress = "pqr";
app.changeme = function() {
app.myname = "abc";
};
});
</script>
</head>
<body ng-controller="controlsample as samp">
<h1>hey iam {{samp.myname}}</h1>
<h2>{{samp.myaddress}}</h2>
<button ng-click="samp.changeme">clickme</button>
</body>
</html>
In the below code I have used ng-repeat ,but no output is being generated
<html ng-app="mymodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule", []).controller("mycontrol", function() {
this.bikes = [{
id: 1,
name: 'a',
not: 3
}, {
id: 4,
name: 'b',
not: 6
}, {
id: 7,
name: 'c',
not: 9
}];
});
</script>
</head>
<body ng-controller="mycontrol as ctrl">
<h1 ng-repeat=bikedemo in ctrl.bikes>
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</h1>
</body>
</html>
Thanks for your help in advance,Any resources suggested in learning angular will be of great use to me
first one
<script>
var demo=angular.module("secondmodule",[]);
demo.controller("controlsample",function($scope)
{
$scope.myname="xyz";
$scope.mysurname="mno";
$scope.myaddress="pqr";
$scope.changeme=function()
{
$scope.myname="abc";
};
});
</script>
<body ng-app = "secondmodule" ng-controller="controlsample">
<h1 >hey iam {{myname}}</h1>
<h2>{{myaddress}}</h2>
<button ng-click="changeme()">clickme</button>
</body>
second one
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule",[]).controller("mycontrol",function($scope)
{
$scope.bikes=[{id:1,name:'a',not:3},
{id:4,name:'b',not:6},
{id:7,name:'c',not:9}
];
});
</script>
</head>
<body ng-app="mymodule" ng-controller="mycontrol">
<ul ng-repeat ="bikedemo in bikes">
<li>
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</li>
</ul>
</body>
</html>
1st you miss open and closing bracket when execute a function
<button ng-click="samp.changeme()">clickme</button>
2nd replace h1 with div or ul/li tag. you could not nested header tag.
<div ng-repeat="bikedemo in ctrl.bikes">
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</div>
For first :
<html ng-app="secondmodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
var demo=angular.module("secondmodule",[]);
demo.controller("controlsample",function()
{
var app=this;
app.myname="xyz";
app.mysurname="mno";
app.myaddress="pqr";
app.changeme=function()
{
app.myname="abc";
};
});
</script>
</head>
<body ng-controller="controlsample as samp">
<h1 >hey iam {{samp.myname}}</h1>
<h2>{{samp.myaddress}}</h2>
<button ng-click="samp.changeme()">clickme</button>
</body>
You missed calling the function ie functionName(). Just add those brackets.
For the second one, try this :
<html ng-app="mymodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule",[]).controller("mycontrol",function()
{
this.bikes=[{id:1,name:'a',not:3},
{id:4,name:'b',not:6},
{id:7,name:'c',not:9}
];
});
</script>
</head>
<body ng-controller="mycontrol as ctrl">
<h1 ng-repeat =bikedemo in ctrl.bikes>
{{bikedemo.id"}}
{{bikedemo.name}}
{{bikedemo.not}}
</h1>
</body>
</html>
Regarding the resources to learn AngularJS you can start with,
Shaping up with Angular.js - Code School a great course for Angular.js fundamentals.
Then you can follow up with,
A Better Way to Learn AngularJS - Thinkster and courses from egghead.io and you can read some book too, this book Pro AngularJS by Adam Freeman is great.
The courses from Pluralsight are great too
Your code has some errors:
For 1st Code Snippet
You did not specified your ng-app
Calling the function in ng-click should contain parenthesis as if you're calling a function in javascript ng-click="samp.changeme()"
For 2nd Code Snippet
Header tags cannot be nested with other header tags
Your ng-repeat expression is not enclosed in double quotes
I am unable to understand the following behaviour:
Here is my angular code:
(function(){
'use strict';
angular.module('myMod',[ ])
.controller('abc',function($scope) {
$scope.products = products;
$scope.printProducts = function(){
for(var index in $scope.products){
console.log($scope.products[index].key + " " + $scope.products[index].check);
}
};
});
var products = [{key:'HERO',check:0}, {key:'MARUTI',check:0}, {key:'TATA',check:0}];
}());
Here is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body ng-app="myMod">
<div ng-controller="abc">
<div ng-repeat="product in products">
<label><input type="checkbox" ng-true-value='1' ng-false-value='0' ng-model='product.check' ng-click="printProducts()">{{product.key}}{{product.check}}</label>
</div>
</div>
<!-- scripts section -->
<script type="text/javascript" src = "angular.js"></script>
<script type="text/javascript" src= "basic.js"></script>
</body>
</html>
So here I am trying to bind to a property of an object 'check' in this case to the output of my checkbox which when selected returns 1 and when unselected gives a value of 0. However, when I am printing the property in console inside the for loop I am getting unexpected behaviour.
For example : when I selected "HERO" I got this output:
HERO 0 -- > should be 1 here
MARUTI 0
TATA 0
Now when I selected Maruti I got :
HERO 1
MARUTI 0 -- > should be 1 here
TATA 0
Can anyone please explain whats going on here ?
Link to fiddle(thought u cannot see console output) http://jsfiddle.net/k2wfyj6e/
You need to use ng-change instead of ng-click. ng-click (Basically the click event underneath) happens too early and the change event fires only after that. Angular listens to the change event to update the model value. So listening to ng-click will be too early because angular would not have processed and set the model yet.
So try:-
<input type="checkbox" ng-true-value='1' ng-false-value='0'
ng-model='product.check' ng-change="printProducts()">
{{product.key}}{{product.check}}</label>
Demo
I have simple table generated by PHP.
<table border="1" id="control>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr> //Row #3
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
I would like to hide 3rd row when page loads using javascript or css. Is there any way to do this without giving 3rd row ID?
Thank you in advance
with css3 you can use the :nth-child selector
#control tr:nth-child(3)
{
display:none;
}
using jquery its pretty simple, $('#control tr:eq(2)').hide()
Try this
document.getElementsByTagName("tr")[2].style.display = 'none';
Using pure JavaScript (no framework like JQuery etc.) one can do:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" id="control">
<tbody>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
<tr><td>row4</td></tr>
<tr><td>row5</td></tr>
<tr><td>row6</td></tr>
</tbody>
</table>
<script type="text/javascript">
var tableElm = document.getElementById("control");
var tableChilds = tableElm.getElementsByTagName("tr");
var row3 = tableChilds[2];
row3.style.display = "none";
// alternatively:
//row3.style.visibility = "hidden";
</script>
</body>
</html>
Use jQuery's eq(int) to select the row at the zero-based index:
$("#control tr").eq(2).hide();
I have this js part of script:
jQuery.each(data, function(index, value) {
$("table_div").append("<td>" + value + "</td>");
});
I want use this for create a table with twitter bootstrap. In the html page there is this table element:
<table class="table table-striped" id="table_div">
</table>
But this solution doesn't works. How I have to do? Thank you!
First of all, you're not appending any <tr> elements which are needed in a table, and secondly you're referring to $("table_div") instead of $("#table_div") (the hashtag # means that you're referring to an ID, just like in CSS).
jQuery.each(data, function(index, value) {
$("#table_div").append("<tr><td>" + value + "</td></tr>");
});
Besides referring to the node <table_div> instead of the id #table_div you don't want to append anything to the table node.
You should take a look at this as well as here and here.
You should use tbody when using Twitters Bootstrap anyways for example, like so:
<table id="table_div" class="table table-striped">
<tbody></tbody>
<table>
here the right js
for (i in data) {
$('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>');
}
For more research look here Add table row in jQuery
Edit:
Ok i wrote you an entire example using twitters bootstrap and jQuery.
This works, if it doesn't for your data array, something is wrong with it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<table class="table table-striped" id="my-table">
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
var data = ["foo","bar"];
$(document).ready(function(){
$.each(data, function(i,item){
$('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>');
});
});
</script>
</body>
</html>