how i can row in angular to the first
html :
<title>Add Rows</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body ng-controller="MainController">
Add Row {{counter}}
<table>
<thead>
<tr>
<th width="200">Some Header</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in rows">
<td>{{rowContent}}</td>
</tr>
</tbody>
</table>
</body>
</html>
js :
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.rows = ['Row 1', 'Row 2'];
$scope.counter = 3;
$scope.addRow = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
}]);
http://codepen.io/calendee/pen/buCHf
in the example below
it added the row in the last , how i can it to be the first row not the last.
mate, just use unshift instead of push, then it will insert to the top of array,
$scope.rows.unshift('Row ' + $scope.counter);
$scope.counter++;
have done a fiddle for you:
http://codepen.io/anon/pen/QjPxvN?editors=101
Related
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
I am looking to create a table that is specific to the index number that can be matched in multiple items. So for example, if I want just the items for index [0], I want it to output:
1a 2a
1b 2b
How can I achieve this in my html code? The html is formatted as is so I can write successive, repeated values.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.items = [];
$scope.items[0] = ["1a", "2a"];
$scope.items[1] = ["3a", "4a"];
$scope.items[2] = ["5a", null];
$scope.moreitems = [];
$scope.moreitems[0] = ["1b", "2b"];
$scope.moreitems[1] = ["3b", "4b"];
$scope.moreitems[2] = ["5b", null];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table class="table">
<tr ng-repeat="tr in items">
<td ng-repeat="td in tr track by $index">{{td}}</td>
</tr>
<tr ng-repeat="tr in moreitems">
<td ng-repeat="td in tr track by $index">{{td}}</td>
</tr>
</table>
</div>
</body>
One approach is to use ng-repeat-start and ng-repeat-end to create two rows in the first loop:
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.items = [];
$scope.items[0] = ["1a", "2a"];
$scope.items[1] = ["3a", "4a"];
$scope.items[2] = ["5a", null];
$scope.moreitems = [];
$scope.moreitems[0] = ["1b", "2b"];
$scope.moreitems[1] = ["3b", "4b"];
$scope.moreitems[2] = ["5b", null];
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table">
<tr ng-repeat-start="arr in items" ng-init="itemIndex=$index">
<td ng-repeat="data in arr track by $index">{{data}}</td>
</tr>
<tr ng-repeat-end>
<td ng-repeat="data in moreitems[itemIndex] track by $index">{{data}}</td>
</tr>
</table>
</body>
For more information, see
AngularJS ng-repeat Directive API Reference - Special repeat start and end points
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
I am working with angularjs data table where I don't need sorting for all the columns. So I want to disable sorting for specified columns. I want to disable sorting for column no. 2 and 4 for the below case.
var app = angular.module('myApp',['datatables']);
app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder) {
$scope.list = [
{"eid":"10","ename":"nam1","sales":"20"},
{"eid":"20","ename":"nam2","sales":"20"},
{"eid":"30","ename":"nam3","sales":"20"},
{"eid":"40","ename":"nam4","sales":"20"}
];
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
<script src="http://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css">
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
<thead>
<tr>
<th>Employee ID</th>
<th>name</th>
<th>sales</th>
<th>details</th>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
<td> {{ data.sales }} </td>
<td>view</td>
</tr>
</tbody>
</table>
</div>
Today I got the same issue and here is the what I have found; In my case I wanted to remove sorting feature from first column since it just contain a check box.
According to the official documentation this is the code block;
app.controller('exceptionViewCtrl', ['$scope', 'DTColumnDefBuilder', function ($scope, $routeParams, DTColumnDefBuilder) {
$scope.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0).notSortable()];
}]);
But this is not worked; Then I figure out even if I disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']. So you need to additionally set order to target some other column instead.
So the complete html+angular code as follows;
HTML
<table datatable="" id="example2" class="table table-bordered table-hover" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
// table data
</table>
Angular
app.controller('exceptionViewCtrl', ['$scope', 'DTColumnDefBuilder', 'DTOptionsBuilder', function ($scope, DTColumnDefBuilder, DTOptionsBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('order', [1, 'asc']);
$scope.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0).notSortable()];
}]);
try it:
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
});
I am pretty new to angular and i cant get it right.
inside the following example i am trying to show the answer to a question after the user clicks on the corresponding button.
before the answer is shown i want to run a function that checks if the user has the privilege to reveal the answer. in the example i assume he has the rights.
what i have to do to to remove the "ng-hide" class in the row where the button was clicked.
i appreciate any kind of help.
thanks in advance
var myApp = angular.module('myApp', []);
myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) {
$scope.questions = [
["what is 1+1?"],
["what color of the sky"],
["what is the answer to the universe"]
];
$scope.answers = [
2, ["blue, black or orange"],
40
];
$scope.hideme = function(i) {
$log.log("element " + i + " was cicked");
//this will be detemined within a fct, so lets asume the has the according rights
var userPrivilege = true;
if (userPrivilege) {
//HOW TO: show the answer with the index i
}
}
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<!-- angular -->
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-controller=QuestionCtlr>
<table class="table table-hover">
<thead>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in questions track by $index">
<td>{{q[0]}}</td>
<td class = "ng-hide">{{q[0]}}</td>
<td>
<button type="button" ng-click="hideme($index)" class="btn btn-default">show me</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here's a complete working example.
Things I changed:
The answers are now stored as a property of each question. This makes the code neater (no need to track by $index).
The ng-show directive is used as an attribute instead of a class, and is bound to a showAnswers property of the question.
The showme function sets the showAnswers property to true when you click the button.
var myApp = angular.module('myApp', []);
myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) {
$scope.questions = [
{question: "what is 1+1?", answers: [2]},
{question: "what color of the sky", answers: ["blue", "black", "orange"]},
{question: "what is the answer to the universe", answers: [42]}
];
$scope.showme = function(q) {
$log.log("question " + q.question + " was cicked");
var userPrivilege = true;
if (userPrivilege) {
q.showAnswers = true;
}
}
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<!-- angular -->
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-controller=QuestionCtlr>
<table class="table table-hover">
<thead>
<tr>
<th>Question</th>
<th colspan="2">Answer</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in questions">
<td >{{q.question}}</td>
<td ng-show="q.showAnswers">
<div ng-repeat="a in q.answers">{{a}}</div>
</td>
<td>
<button type="button" ng-click="showme(q)" class="btn btn-default">show me</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Try in html
<table class="table table-hover">
<thead>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in questions">
<td>{{q[0]}}</td>
<td ng-class="{hide : active != $index}">{{answers[$index]}}</td>
<td>
<button type="button" ng-click="hideme($index)" class="btn btn-default">show me</button>
</td>
</tr>
</tbody>
</table>
angular
var myApp = angular.module('myApp', []);
myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) {
$scope.questions = [
["what is 1+1?"],
["what color of the sky"],
["what is the answer to the universe"]
];
$scope.answers = [
2, ["blue, black or orange"],
40
];
$scope.active = null;
$scope.hideme = function(i) {
$scope.active = i;
}
}]);
Fiddle
Taking your 'privilege' request in consideration, I think you will want to create a condition. Instead of adding the class ng-hide, use ng-hide, ng-show or ng-if like this:
<td ng-show="hasPrivilege && show[$index]">
<!--or ng-hide or ng-if-->
and your button:
<button type="button" ng-click="hideme($index)">
This will show the td if both statements are true. If one or both of them are false, it won't show the element.
then in your controller:
$scope.hideme = function(index) {
$scope.hasPrivilege = getPrivilege();
$scope.show[index] = true;
}
the getPrivilege() function should return true or false based on whether the user has the privilege.
Okay first of all you can use
ng-if="condition" //gets only rendered if condition is true
ng-show="condition" //shows when condition is true
ng-hide="condition" //hides when condition is true
So on your button
ng-click="showAnswer()"
In your Controller
$scope.displayAnswer = false;
$scope.showAnswer = function(){
if(hasRights == true){
$scope.displayAnswer = true //this is used for the hide and show
}
}
In your html 3 possible ways
<span ng-if="displayAnswer == true">This is the answer!!!</span>
<span ng-show="displayAnswer == true">This is the answer!!!</span>
<span ng-hide="displayAnswer == false">This is the answer!!!</span>
<button ng-click="showAnswer()">This is the answer!!!</span>
2nd Solution with toggle
if you want to hide the Answer again on the same button
This shows and hides the button depending if its currently shown or hidden
$scope.toggleAnswer = function(displayAnswer){
if(hasRights == true && $scope.displayAnswer == false){
$scope.displayAnswer = true //this is used for the hide and show
}else if($scope.displayAnswer == true){
$scope.displayAnswer = false;
}
}
2nd Html
<span ng-if="displayAnswer == true">This is the answer!!!</span>
<button ng-click="toggleAnswer(displayAnswer)">This is the answer!!!</span>
In your case
<button ng-click="toggleAnswer($index)">Hide / Show</button>
And In your Controller
$scope.answers = [{A: 2, show: false},{A: 'blue', show: false}]
$scope.toggleAnswer = function(index){
if(hasRights == true){
$scope.answers[index].show = true //this is used for the hide and show
}
}
in HTML
<span ng-if="item.show == true">The Answer !!</span>
//the item is coming from item in Answers from the ng-repeat