I got a problem with js file. My js file is not linking to HTML file. Please help me.
HTML code:
"
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="repeaters.js"></script>
<link href = "Repeaters.css" type="text/CSS" rel="stylesheet">
</head>
<body ng-app="repeatModule"> <!-- root module-->
<div ng-controller="controlRepeater"> <!-- controller name-->
<div>
<table>
<thead>
<tr>ID </tr>
<tr> NAME</tr>
</thead>
<tbody >
<tr ng-repeat="product in products"> <!-- Great. Now let's add the repeat directive. It is important to understand that ngRepeat will repeat itself and its contents for each element in the collection. We must therefore apply it to the <tr> and not the <tbody>. -->
<td>{{product.id}} </td>
<td>{{product.name}} </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="oddrow">
</div>
</body>
</html> "
Below is my Angular js code:
This js file is not linking to HTML code. how can I debug this kind of issues?
> var myApp = angular.module('repeatModule', [])
.controller("controlRepeater", ["$scope", function ($scope) {
$scope.products = [
{id:1, name: "Hockey" }
{id:2, name: "cricket" }
{id:3, name: "pool" }
{id:4, name: "badminton"}];
}]);
Your array syntax is wrong, you need commas to separate your array items:
$scope.products = [
{id:1, name: "Hockey" },
{id:2, name: "cricket" },
{id:3, name: "pool" },
{id:4, name: "badminton"}
];
Once you fix this, it should work, see this codepen.
Related
I want to send a angularjs binded value which has mailid's seperated by , to mailto of anchor tag.
team.emails will have a single mail id or many mail id's seperated by comma.
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><a href='mailto:{{team.emails}}'</a></td>
</tr>
On clicking that column in the row should open outlook with the team email addresses in To part.
Kindly let me know if this is the correct approach.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
</head>
<body ng-app = "myapp" ng-controller="homeController">
<table style="width:100%">
<tr ng-repeat="team in teamsData">
<td>{{team.name}}</td>
<td><p>
<a href="mailto:{{team.emails}}" target="_top">
Send Mail</a>
</p></td>
</tr>
</table>
</body>
<script>
angular.module('myapp', []).controller('homeController', ['$scope', function($scope){
$scope.teamsData = [{
name:'john',
emails:'xxx#gmail.com,yyy.gmail.com,zzz.gmail.com'
},
{
name:'mark',
emails:'lll#gmail.com,ppp.gmail.com,ooo.gmail.com'
}]
}])
</script>
</html>
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.
I'm trying to hide some rows from a table when a button is clicked. I want to hide just the rows where the number of exams is equals to zero.
HTML code:
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide();"> HIDE ROWS</button>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-class="{'showNot' : item.examsNum === 0}" ng-repeat="item in data.records">
<td>{{item.name}}</td>
<td>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
AngularJS:
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.data = {
records: [{
name: 'Mel',
examsNum: 2
}, {
name: 'Sarah',
examsNum: 2
}, {
name: 'Jane',
examsNum: 0
}]
};
$scope.hide = function () {
angular.element('.showNot').css("display", "none");
};
}]);
Here is the jsfiddle: link
I'm pretty new to AngularJS, and I can't see what I'm doing wrong.
Thanks!
Try using a show/hide flag, and use it in ng-show along with the zero check:
Here's a fiddle.
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide();"> HIDE ROWS</button>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-hide="(item.examsNum == 0) && hideZero" ng-repeat="item in data.records">
<td>{{item.name}}</td>
<td>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
and
myApp.controller('myController', ['$scope', function ($scope) {
$scope.data = {
records: [{
name: 'Mel',
examsNum: 2
}, {
name: 'Sarah',
examsNum: 2
}, {
name: 'Jane',
examsNum: 0
}]
};
$scope.hide = function () {
$scope.hideZero = !$scope.hideZero;
};
}]);
You can give an id to your table <table id="table"> then change your selector to
var elem = document.querySelector('#table');
angular.element(elem.querySelector('.showNot')).css('display', 'none')
We cant use class selectors easily in jQlite - Limited to lookups by tag name but this should work your you
JSFiddle Link
you need to use the ng-show or ng-hide directive insted of display none
html
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide()"> HIDE ROWS</button>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-show="Display" ng-repeat="item in data.records">
<td>{{item.name}}</td>
<td>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
script
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.data = {
records: [{
name: 'Mel',
examsNum: 2
}, {
name: 'Sarah',
examsNum: 2
}, {
name: 'Jane',
examsNum: 0
}]
};
$scope.Display = true;
$scope.hide = function () {
$scope.Display = !$scope.Display ;
};
}]);
Perhaps using a filter is more correct.
https://docs.angularjs.org/api/ng/service/$filter
Filters may be used to hide items in a list based on some criteria - which sounds like what you are doing
Okay. So you got something wrong over here. the 'item' is only available inside the scope of ng-repeat. You cannot access it at the same level as ng-repeat.
Here is a working version of your code. And please use ng-hide/ng-show for such things. Its more efficient.
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide();"> HIDE ROWS</button>
<br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data.records">
<td ng-hide='item.examsNum === 0'>{{item.name}}</td>
<td ng-hide='item.examsNum === 0'>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I've been searching for hours now and I can't seem to find how to parse HTML code when retrieving using ng-repeat. I checked out $sce.trustAsHtml but I don't know how to apply it in my code.
html file:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<h2>My Links</h2>
<table class="table table-bordered">
<thead>
<tr>
<td>Name</td>
<td>URL</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="stuff in myStuff()">
<td>{{stuff.name}}</td>
<td>{{stuff.url}}</td>
</tr>
</tbody>
</table>
</div>
javascript
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.myStuff = function() {
return [
{
'name':'Google',
'url':'Google'
},
{
'name':'Yahoo',
'url':'Yahoo'
},
{
'name':'Microsoft',
'url':'Microsoft'
}
];
};
});
It's displaying the HTML source but I want it compile the code. Is my JS approach wrong? I'll be applying it to a json file using $http directive once I figure this out. Can anyone shed some light? I have my code at http://jsfiddle.net/s2ykvy8n/
Thanks.
Include ng-sanitize script and in your module add dependency.
var myApp = angular.module('myApp', ['ngSanitize']);
and just use ng-bind-html
<td ng-bind-html="stuff.url"></td>
and you are good to go:-
Plnkr
With what you are doing, the html in the binding will be displayed as textcontent in the element while processed by interpolation directive.
My first inclination (since from your example, you are just returning links) is to advise you to remove the html from your returned json and just return the url as a string.
Format:
{
'name': 'Google',
'url': 'http://google.com'
}
Then your HTML looks like this,
<tbody>
<tr ng-repeat="stuff in myStuff()">
<td>{{stuff.name}}</td>
<td>{{stuff.name}}</td>
</tr>
</tbody>
But, if you MUST have HTML strings in your json file, I would take a look at $compile. There are examples towards the bottom that can help you on how you can create a directive to compile your 'url' string to HTML
I am using jQuery mobile and Knockout.js to test the first example on http://knockoutjs.com/documentation/foreach-binding.html but nothing is displayed and error console of FireFox reveals this error:
Timestamp: 9/10/2012 1:13:16 PM
Error: NotFoundError: Node was not found
Source File: http:///kotest/Scripts/knockout-2.1.0.js
Line: 46
Note that this is the latest knockout-2.1.0.js downloaded today.
The code is below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.1.0.js" type="text/javascript"></script>
</head>
<body>
<h4>People</h4>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
</script>
</body>
</html>
I should mention that it works as expected if references to the jQuery mobile js files are deleted.
Update:
You can try the jQuery mobile pageinit function.
<script type="text/javascript" >
$(document).on('pageinit','[data-role=page]', function(){
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
});
</script>
include a div Tag with the data-role="page" binding from jquery mobile:
<div data-role="page" >
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
Your document is not in the ready state. Since you're using jQuery mobile, you'll want to listen for the pageinit event, then apply your KO bindings in that:
$(document).bind('pageinit', function() {
// Use KO here
});
Note that Daniel's answer suggests to use document.ready, however, that doesn't work in the jQuery mobile bits where page contents are loaded asynchronously via AJAX. Instead, you must use pageinit event.