angular js ng-click ng-controller and ng-app - javascript

I can't get angularJS to recognize a variable defined in ng-app, ng-controller, or ng-click.
3 sets of codes that I tried so far are:
<table>
<thead>
<tr>
<script>
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function ($scope) {
$scope.clkCount = 0;
});
</script>
<th ng-app="ngClickApp" ng-controller="ngClickCtrl">
<button class="some-scss" ng-click="clkCount = clkCount +1">
<b>someCol {{ clkCount }}</b>
</button>
</th>
<table>
<thead>
<tr ng-app="ngClickApp">
<th><button class="some-scss" ng-controller="ngClickCtrl"><b>someCol {{ clkCount }}</b></button></th>
<script>
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function ($scope) {
$scope.clkCount = 0;
});
</script>
<table>
<thead>
<tr ng-app="ngClickApp">
<th><button class="some-scss" ng-controller="ngClickCtrl"><b>someCol {{ clkCount }}</b></button></th>
<script>
var ngClickCtrl = function ($scope) {
$scope.clkCount = 0;
};
</script>
All three of them failed to recognize clkCount.
Examples that I found do not use table format. (https://www.tutorialsteacher.com/angularjs/angularjs-scope) or (https://www.tutlane.com/tutorial/angularjs/angularjs-ng-click-event-function-with-example)
Also, just out of curiosity, to test ng-click in the first code, I defined some function and called it in ng-click, but it did not work.
clickTest() {
console.log('1');
}
<th><button class="some-scss" ng-click="clickTest()">someButton</button></th>
did not print 1 when I clicked "someButton" whereas
clickTest() {
console.log('1');
}
<th><button class="some-scss" (click)="clickTest()">someButton</button></th>
did print 1 when I clicked the same button.
So, I was wondering if ng-app, ng-controller, and ng-click need some type of initiation or they have to be in the <tbody> or any other suggestions why all the above codes that worked just fine in examples do not work in the tables.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<table>
<thead>
<tr ng-app="ngClickApp">
<th>
<button class="some-scss" ng-controller="ngClickCtrl" ng-click="clkCount=clkCount+1"><b>someCol {{clkCount}}</b></button>
</th>
</tr>
</thead>
</table>
</body>
</html>
<script>
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function ($scope) {
$scope.clkCount = 0;
var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function($scope) {
$scope.clkCount = 0;
});
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<table>
<thead>
<tr ng-app="ngClickApp">
<th>
<button class="some-scss" ng-controller="ngClickCtrl" ng-click="clkCount=clkCount+1"><b>someCol {{clkCount}}</b></button>
</th>
</tr>
</thead>
</table>
</body>
</html>
Hi,
You should not put the script inside a table. Need to keep the script in a separate file or at the end of your HTML or just above the body tag inside HTML so that the page loads faster as javascript code can block/delay the loading process.
Try not to use scripts, CSS or HTML in the same file to keep the code easy to read, maintain and modify.
Thanks

Related

How to change Background color of table row based on respective cell data using angularjs?

I want to change Background color of row based on cell data, like if it matches first four characters from table cell "td", then row should change its color to red.
here is my example, it is working but it takes whole cell data.but i want row color should change once it matches first four characters from cell.
<style>
.bgRed{
background-color:red;
}
</style>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Class Name</th>
<th>Roll No</th>
<th>Email</th>
</tr>
</thead>
<tbody ng-repeat="std in students">
**<tr ng-class="{'bgRed': std.Name === 'Prash'}>**
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
and my table is
Table row should change to red if table cell data "Prash or Prashant" matches.instead of taking "Prashant Olekar"
how to achive this please help. Thank you
Using substring you can trim the characters of the string,
here I'm creating one more variable(filed) "trimmed_name" which is a substring of your "name" which gives you first 4 characters of your string "name".
<tr ng-repeat="std in students" ng-init="trimName(std)">
<td ng-class="{'bgRed': std.trimmed_name === 'Prash', 'bgBlue': std.trimmed_name === 'Pavi', 'bgBlack' : std.trimmed_name === 'Pava'}">{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
In Css add respective colours for respective classes
in your controller
$scope.trimName = function (std) {
std.trimmed_name = std.Name.substring(0, 4);
return std;
};
Just in case if 'Prash' dose not work use {'bgRed': std.trimmed_name === "Prash"}
Hope it helps you.
you can use a custom filter to set class according to condition of your row data,
html
<tbody ng-repeat="std in students | filter:filterColor">
<tr class="{{std.class}}">
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
js
$scope.filterColor = function (item) {
if (your condition) {
item.class = 'your class';
}
else
item.class = 'some other class';
return true;
};
I have got solution to my question with the help of Rajat, here is my code. but it only matches characters from 0th Position.
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/App/app.js"></script>
<style>
.bgRed {
background-color: #cfeaff;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Class Name</th>
<th>Roll No</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students" ng-init="trimName(std)" ng-class="{bgRed: std.trimmed_name === 'Pras'}">
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
and In Controller
/// <reference path="../angular.min.js" />
var myApp = angular.module('myApp', [])
.controller("myController", function ($scope, $http, $log) {
var successCallback = function (response) {
$scope.students = response.data;
$log.info(response);
}
var errorCallback = function (response) {
$scope.error = response.data;
$log.info(response);
}
$scope.StudentsData = $http({
method: 'GET',
url: 'PKWebService.asmx/getPkData'
})
.then(successCallback, errorCallback);
$scope.trimName = function (std) {
std.trimmed_name = std.Name.substring(0, 4);
return std;
};
});
and output is
Thank you

$values not printing in ng-repeat which avilable in map in angularjs

I have map which is having key and vaule has values startes with $. And i am displaying these things in table using ng-repeate. But values which start with $ not printing in table.
I have sharing code, can some please let me know how can i achive this
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
outside of map:------- {{name1}} --------printing ok
<br> <br>
<table >
<tr>
<td width="15%" class="greyTdHeads tdPad">Field Name</td>
<td width="14%" class="greyTdHeads tdPad">Field Value</td>
</tr>
<tr ng-repeat="(key,value) in params">
<td class="whiteTd tdPad">{{key}}</td>
<td ><input
Type="text"
ng-model="params[key]"></input></td>
</tr>
</table>
inside of map , not able to print
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.name1 = "$top";
$scope.params=
{without$:"without$val","$with$":" ",$batchsize:" ",$expand:" ",$filter:" ",$orderby:" ",$select:" ",$skip:" ",$top:" "}
});
</script>
</body>
</html>
Angular ignore variables starting with '$' because he uses some variables with this standard like for example $$hashkey
it applys to angular.equals, {{}}, ng-bind
you can create a new directive and read those values but i dont recommend it
have a good day.

How can I change the innerHTML of div with a variable, inside the scope function in angular js?

I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}
You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>
Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}

get Data using angularJS

I'm trying to get Data in HTML Table using angularJS, I've splitted the project in 3 parts :
1- Main Part : main.html : which load html Table file and also the Java script(angularJS) (Main.html)
<div class="panel panel-primary">
<div class="panel-heading">Student's List</div>
<div ng-include="'Student_list.html'">
</div>
<script src= "../js/ngMain.js"></script>
2- Html Table : it's Table html tag (Student_list.html)
<table class="table table-borAdherentdered table-hover" id="stdlst">
<thead>
<tr>
<th>Id</th>
<th>Full Name</th>
<th>Email</th>
<th>Birth's Date</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students">
<td>{{std.Id}}</td>
<td>{{std.Name}}</td>
<td>{{std.Email}}</td>
<td>{{std.BoD}}</td>
<td>{{std.Class}}</td>
</tr>
</tbody>
</table>
3- JS File : load data From mySQL (ngMain.js)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.GetStudent=function() {
$scope.students=[];
$http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
.success(function (data,status,headers,config) {
$scope.students=data;
console.log("Get Student List succesfully");
});
}
});
The php script (Main.php) it's working I have tested using REST app with no problem.
My Problem here :
Is that I don't get any Data, only Table Header (BTW :in student Table there is a lot of records) ?
Any idea What 's missing ? or if I m doing it wrong please correct me .
Thanks.
/Koul
I think that the code you posted is incomplete.
There are no ng-app and ng-controller at all and the GetStudent function is never called.
However here there is a working fiddler with mock data that I think will help you.
http://jsfiddle.net/ds7hryn5/2/
HTML:
<div ng-app="myApp">
<div class="panel panel-primary" >
<div class="panel-heading">Student's List</div>
<table class="table table-borAdherentdered table-hover" id="stdlst" ng-controller="myCtrl">
<thead>
<tr>
<th>Id</th>
<th>Full Name</th>
<th>Email</th>
<th>Birth's Date</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students">
<td>{{std.Id}}</td>
<td>{{std.Name}}</td>
<td>{{std.Email}}</td>
<td>{{std.BoD}}</td>
<td>{{std.Class}}</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope','$http',function($scope,$http) {
$scope.GetStudent=function() {
$scope.students=[{
Id:4,
Name:'Name1',
Email:'name1#eee.it',
BoD:'bod1',
Class:'class'
},{
Id:5,
Name:'Name2',
Email:'name2#eee.it',
BoD:'bod2',
Class:'class'
},{
Id:6,
Name:'Name3',
Email:'name3#eee.it',
BoD:'bod3',
Class:'class'
}];
}
$scope.GetStudent();
}]);
It seems to me that your function, $scope.GetStudent, is never called in your controller, thus the data for your table is never fetched.
If $scope.students stays empty, you will see only the headers of your table.
To debug these kinds of issues, it is good practice to watch the network tab in your developer tools of the browser you're using, just to see if your data provider (Main.php) is being called.
In this case I would suspect that it isn't since there is no call to your $scope.GetStudent function in your provided code.
To call the function when the script is loaded, just add a call ($scope.GetStudent()) in your controller just after your function definition.
Example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.GetStudent=function() {
$scope.students=[];
$http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
.success(function (data,status,headers,config) {
$scope.students=data;
console.log("Get Student List succesfully");
});
}
$scope.GetStudent();
});
Regards,
Sem

passing parameter from html to javascript in Angular

I have a javascript function to which I should pass a parameter.This parameter should be retrieved from html like this
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
my function is accounts.findAllAccountsByRestaurant() and the parameter is restaurant, which is retrieved from ng-repeat.How can I pass this parameter to the function?Thanks in advance.
try like this
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="product in products">
<td ng-init="Y(product)">{{product}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.products=[11,22,33];
$scope.Y= function(ar)
{
alert(ar);
};
});
</script>
</body>
If you've defined your scope correctly, everything should work as it is:
http://jsfiddle.net/jpwup7Lb/5/
$scope.accounts={
selectedRestaurants:
["one","two","three"],
findAllAccountsByRestaurant:function(restaraunt){
return "here's all accounts for "+restaraunt;
}
}
try doing this:
<tr ng-repeat="restaurant in accounts.selectedRestaurants">
<td >{{restaurant}}</td>
<td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>
Then in your controller
$scope.accounts.findAllAccountsByRestaurant = function(restaurant) { return alert(restaurant); };

Categories