Sort Content using Angular JS - javascript

I have Home Team and away Team Scorer in my HTML and i want to sort each Goal Scorer in Minutes (Ascending). Here is the HTML Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="angular/angular.min.js"></script>
<script>
(function(angular) {
'use strict';
angular.module('orderByScore', [])
.controller('ScoreController', ['$scope', function($scope) {
$scope.goals =
[{scorer:'Glen', mins:'40"', type:'Own Goal', min:40},
{scorer:'Beckham', mins:'20"', type:'Goal', min:20},
{scorer:'Ronaldo', mins:'70"', type:'Own Goal', min:70}];
}]);
})(window.angular);
</script>
<script>
(function(angular) {
'use strict';
angular.module('orderByScore', [])
.controller('ScoreControllerX', ['$scope', function($scope) {
$scope.goalsx =
[{scorer:'Glen', mins:'4"', type:'Goal', min:4},
{scorer:'Glen', mins:'75"', type:'Goal', min:75},
{scorer:'David', mins:'30"', type:'Own Goal', min:30}];
}]);
})(window.angular);
</script>
</head>
<body ng-app="orderByScore">
<div ng-controller="ScoreController">
<div class="home-team col-md-6">
<table class="goalx">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goalx in goalsx | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
<div class="away-team col-md-6">
<table class="goal">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goals | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
If away team is working, home team is not displaying. if home team display the away team is dissappear. I want the home and away team scorer display. Please Help to make it work.

You will have to use ng-repeat with filters. In your case, you will have to use orderby filter.
<ul>
<li ng-repeat="goal in goalsx | orderBy:'goal.mins'">{{goal.scorer}}</li>
</ul>
Hope this helps.

replace goal with goalx in ng-repeat="goalx in goalsx | orderBy:'+min' like {{goalx.scorer}}

In home team's case you used "ng-repeat = goalx in goalsx" but inside the div everywhere you used "goal.scorer","goal.miins", etc. All you have to do is replace the ng-repeat as "ng-repeat = goal in goalsx".
<div class="home-team col-md-6">
<table class="goalx">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goalsx | orderBy:'+min'"> // use 'goal in goalsx' here
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>
<div class="away-team col-md-6">
<table class="goal">
<tr style="display: none">
<th>Scorer</th>
<th>Minute</th>
<th>Type</th>
<th>Min</th>
</tr>
<tr ng-repeat="goal in goals | orderBy:'+min'">
<td>{{goal.scorer}}</td>
<td>{{goal.mins}}</td>
<td>{{goal.type}}</td>
<td style="display: none">{{goal.min}}</td>
</tr>
</table>
</div>

Related

Vue.js 2.x v-for in a <table> not working (Property or method not defined)

I was trying to iterate though an array defined in the data section of a Vue instance, so the table head could be determined automatically. But when I ran the code, the console output was as follows:
Here's the code (.js file combined):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
Staffs
</h3>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th v-for:"term in items">
{{term}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>6556</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<ul class="pagination">
<li>
Prev
</li>
<li v-for="n in 5">
{{n}}
</li>
<li>
Next
</li>
</ul>
</div>
<div class="col-md-4 column">
<button class="btn btn-default" type="button">button</button>
</div>
</div>
</div>
<script>
'use strict';
console.log("here we go!");
var tab = new Vue({
el: '#mytable',
data: {
items: ['aa','bb']
}
});
</script>
</body>
</html>
And the appearance was like:
Replace
v-for:"term in items"
With
v-for="term in items"

Unknown provider: ngTableParamsProvider

I am building a pagination table and i am using routeprovider. So the flow is on the homepage user is presented with a carousel when he clicks the text on carousel he is directed to a new html page called queryBoard, where there is a form to submit some details, it then fetches the data from back and displays in tabular format but when user is redirected to queryBoard page i keep getting error
Unknown provider: ngTableParamsProvider
I have included 'ngTable' in my module.
Main.js
angular.module('ui.bootstrap.demo', ['pageslide-directive', 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngRoute']);
index.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="resources/js/main.js"></script>
<script src="resources/js/CarouselController.js"></script>
<script src="resources/js/dashboardrouter.js"></script>
<script src="resources/js/TypeAheadController.js"></script>
<script src="resources/js/angular-pageslide-directive.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-view></div>
</body>
</html>
welcome.html [user is presented with carousel and on click he is routed to a new page]
<h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
<div>
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="/resources/images/cloud-home.jpg" style="height:305px; margin:auto;">
<div class="carousel-caption">
<a ng-click='sendEnvName(slide.text)'>
<h3 class="carousel-caption text-primary center-block">
{{slide.text}}</h3>
</a>
</div>
</uib-slide>
</uib-carousel>
There are exceptions during app initialization, click here to see details
</div>
Carousel.js [relevant part]
$scope.sendEnvName = function (gridName) {
alert(gridName)
$location.path("/queryBoard/"+gridName);
}
dashboardrouter.js
angular.module('ui.bootstrap.demo').config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'welcome.html',
controller: 'CarouselDemoCtrl'
}).
when('/queryBoard/:gridName', {
templateUrl: 'query/queryboard.html',
controller: 'documentNameTypeAheadController',
}).
otherwise({
redirectTo: '/welcome'
});
}]);
TypeAheadCOntroller.js
angular.module('ui.bootstrap.demo').controller('documentNameTypeAheadController', function ($scope, $http, $filter, ngTableParams,
$uibModal, $timeout, $log, $window,
$routeParams) {
alert($routeParams.gridName);
});
QueryBoard.html
<title>Query Board</title>
<script type="text/css">
.app-modal-window .modal-dialog {
width: 500px;
}
</script>
<body>
<script type="text/html">
<ul class="dropdown-menu" role="listbox">
<li ng-repeat="match in matches track by $index"/>
</ul>
</script>
<div class='container-fluid typeahead-demo' ng-controller="documentNameTypeAheadController">
<h1>Query Board</h1>
<form class="form-inline" role="form" ng-submit="submit()">
<div class="form-group">
<input type="text" placeholder="type-name" ng-model="selectedDocumentTypeName"
uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"
class="form-control">
</div>
<div class="form-group col-md-offset-1">
<input type="text" placeholder="search criteria" class="form-control" ng-model="queryCriteria">
</div>
<button type="submit" class="btn btn-default col-md-offset-1">Submit</button>
<div>
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="headerName in headerNames"
class="text-center sortable">
{{headerName}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in paginatedDetailedDataType">
<td ng-repeat="headerName in headerNames">
<div class="animate-switch" ng-if="headerName == spaceIdFieldName">
{{user[headerName]}} </div>
<div class="animate-switch" ng-if="headerName != spaceIdFieldName">{{user[headerName]}}</div>
</td>
<script type="text/ng-template" id="DetailedQueryView.html">
<div class="modal-header">
<h3>Detailed Query view for {{detailedTypeName}} spaceId {{detailedSpaceId}}</h3>
</div>
<div class="modal-body">
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="property in detailedObjectProperties">
<td>{{ property.key }}</td>
<td>
<div ng-show="property.disabled">{{property.value}}</div>
<div ng-hide="property.disabled"><input type="text" ng-model="property.value"/>
</div>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-hide="updateEnabled" ng-click="edit()">Edit</button>
<button class="btn btn-primary" ng-show="updateEnabled" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
I tried including the ngTable in TypeAheadController also but doesnot works, Can you please guide me where am i going wrong

How to pass id to function in Angular?

I have created a datatable showing a list of persons and their details. When the datatable is clicked, it has to show the entity of the single person with their details but my problem is, when I click the datatable it is opening a chat box showing the entity of the last clicked person changing all other chat box details.
How can I limit the append directive, that is, one chatbox for one id?
How to display the name of the particular person without changing the older chat box entity?
Here is the link to Plunker
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body lang="en" ng-app="myApp">
<div ng-controller="ListController">
<div class="content" ng-controller="MainController">
<div class="row">
<div class="col-xs-12">
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tr>
<th>Name</th>
<th>First Name</th>
<th>Status</th>
<th>Reknown</th>
</tr>
<tr ng-repeat="item in artists" style="cursor:pointer;">
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span>{{item.name}}</td>
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span>
<h5>{{item.shortname}}</h5></td>
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span><span class="label label-success">Approved</span></td>
<td ng-click="AppendText($index)"><span value="{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="my-directive-placeholder"></div>
</body>
</html>

Uncaught SyntaxError: Unexpected identifier at <head>

I'm loading a PHP that uses ajax. At first the page loads with no errors. When I trigger the onclick event on a button i get the error "Uncaught SyntaxError: Unexpected identifier" which is indicated on line two of the php file, which is the HTML head tag.
php file:
<html>
<head>
<title>Staff Portal</title>
<link rel="stylesheet" type="text/css" href="Instructor.css">
<script type="text/javascript" src="InstLessons.js"></script>
</head>
<body onload="loadCourse()">
<div id="InstHeader">
<div id="bar">
<table id="inst_bar_table">
<tbody><tr>
<td id="inst_bar_detail">Options</td>
<td id="inst_bar_detail">Logout</td><td>
</td></tr>
</tbody></table>
</div><br>
<h1 id="InstHeaderTitle">Pennco Tech Instructor Portal</h1><h1>
</h1>
</div>
<div id="MainBody">
<div id="course"><table id="InstClassTable"><tbody><tr><th id="classHeadTbl">Code</th><th id="classHeadTbl">Course</th><th id="classHeadTbl"># Students</th><th id="classHeadTbl">Start Date</th><th id="classHeadTbl">End Date</th></tr><tr><td id="classHeadDetailTbl">GEN 101</td><td id="classHeadDetailTbl">Computer Applications</td><td id="classHeadDetailTbl">7</td><td id="classHeadDetailTbl">05-06-15</td><td id="classHeadDetailTbl">07-07-15</td></tr></tbody></table></div>
<div id="detailsection">
<div id="InstMenu">
<ul id="InstMenuList">
<li>Select Class</li>
<li>Class Attendance</li>
<li>Class Assignments</li>
<li>Message Board</li>
<li>Student Data</li>
<li>Class Summary</li>
</ul>
</div>
<div id="instLessons">
<h3><u>Course Lessons</u></h3>
<br>
<table id="instLessonTable">
<tbody>
<tr>
<td id="classHeadDetailTbl">Career Services Assignments</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Career Services Assignments)">Select</button>
</td>
</tr>
<tr><td id="classHeadDetailTbl">Mitchell Final</td>
<td id="InstLessonButtonDetail"><button id="InstLessonButton" onclick="getLessons(Mitchell Final)">Select</button></td>
</tr>
<tr>
<td id="classHeadDetailTbl">Mitchell Hand-In Assignments</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Mitchell Hand-In Assignments)">Select</button></td>
</tr>
<tr>
<td id="classHeadDetailTbl">Mitchell Lab Test</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Mitchell Lab Test)">Select</button>
</td>
</tr>
<tr>
<td id="classHeadDetailTbl">Mitchell Midterm</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Mitchell Midterm)">Select</button>
</td>
</tr>
<tr>
<td id="classHeadDetailTbl">PC</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(PC)">Select</button>
</td>
</tr>
</tbody>
</table>
</div>
<div id="instLessonMenu">
<br>
<button id="LessonMenuButton" onclick="SetPercentages()">Set Course Percentages</button><br><br>
<button id="LessonMenuButton" onclick="newLesson()">New Class Lesson</button><br><br>
<button id="LessonMenuButton" onclick="DelLesson()">Delete Class Lesson</button><br><br>
<button id="LessonMenuButton" onclick="IndivLesson()">New Individual Lesson</button><br><br>
<button id="LessonMenuButton" onclick="DelIndivLesson()">Delete Individual Lesson</button><br><br>
</div>
</div>
</div>
The javascript function on the button onclick event:
function getLessons(lesson){
if(xmlHttpGetLessons.readyState==4 || xmlHttpGetLessons.readyState == 0){
var lesson_title = encodeURIComponent(lesson);
xmlHttpGetLessons.open("GET", 'InstListLessons.php?lesson ="' + lesson_title + '"',true);
xmlHttpGetLessons.send(null);
xmlHttpGetLessons.onreadystatechange = LessonGetServerResponse;
}
}
Your JavaScript function calls will cause an Unexpected identifier syntax error.
<button … onclick="getLessons(Career Services Assignments)">
When clicking the button, the following JavaScript is executed and results in the error.
getLessons(Career Services Assignments)
You'll want to make the function argument be a string, in the same way that you normally would in JavaScript; by wrapping the contents in quote characters. (Single quotes chosen, as we'll be embedding the call into a HTML attribute value, which uses double quotes.)
getLessons('Career Services Assignments')
And popping this back in to your HTML:
<button … onclick="getLessons('Career Services Assignments')">

Angularjs is not loading second time

I am using angularjs in my application. I have a problem with this code, this code generate data first time. But when I come back to that page from other location it give only expression written in jsp page
Below is my app.js
var app = angular.module("myModule",[]);
app.controller(
"ReportController",
function ($scope,$http) {
$http({
method: 'POST',
url: 'mypage_body.do',
data: 'action=fetchdata',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(response) {
$scope.questions = response;
});
}
);
angular.element(document).ready(function (){
angular.bootstrap(document,['myModule']);
});
It gives expression when I reload the page from other location
like this
{{question.title}}
{{cell.f}}{{cell.f}}
{{row.h}} {{row.v}} {{row.v}}
I analyzed that page is not loading again. Means document.ready is not calling again on that page. Could anyone please help how to call again the module written in app.js without using document.ready.
Any help would be appreciated.
Thanks in advance.
<script type="text/javascript" src="/campustoolshighered/css/js/angular-1.2.26.min.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/js/adhocreport/app.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/uiframework/js/bootstrap.js"></script>
<div ng-controller="ReportController">
<div class="row" ng-repeat="question in questions">
<div class="col-md-12">
<div class="module">
<div class="heading">
<h2>{{question.title}}</h2>
<div class="module-options">
<span tabindex="3" class="icon-settings pop" title="Edit" data-toggle="tooltip" data-popoverid="#icon-setting"><span class="sr-only">Widget settings</span></span>
</div>
</div>
<div class="module-content" >
<div class="row">
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" role="columnheader" ng-repeat="header in question.dataTable.cols" >{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in question.dataTable.rows">
<td ng-repeat="cell in row.cells"><a ng-if="cell.link" href="{{cell.link}}" tabindex="3">{{cell.f}}</a><span ng-if="!cell.link">{{cell.f}}</span></td>
</tr>
</tbody>
</table>
</div>
<ul ng-show="question.aggregateTable">
<li ng-repeat="row in question.aggregateTable.rows">
<strong>{{row.h}} </strong>
<a ng-if="row.link" href="{{row.link}}" tabindex="3">{{row.v}}</a>
<span ng-if="!row.link">{{row.v}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if I do not bootstrap my code manually on document.ready page does not load angular js not even first time.

Categories