How to get a cell value from HTML table using ng-click directive?
I need to implement the best way to capture the values of a row using ng-click
Html table:
<div ng-controller="myController">
<table>
<thead>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</thead>
<tbody>
<tr ng-repeat="item in stutents">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button type="button" ng-click="getCellValue()">View</button></td>
</tr>
</tbody>
</table>
</div>
My controller:
var app = angular.module('firstApp', []);
app.controller('myController', function($scope){
$scope.stutends = {};
//array values... etc
$scope.getCellValue = function() {
//i want values index, ej. table[0] = id, table[1] = name etc... its posible ?, ej
//var name = table[1]
console.log(name);
}
});
Pass the object as a parameter to the function and access it
<td><button type="button" ng-click="getCellValue(item)">View</button></td>
Controller
$scope.getCellValue = function(item) {
console.log(item.name);
console.log(item.id);
}
var app = angular.module('firstApp', []);
app.controller('myController', function($scope) {
$scope.students = [{
name: 'dat',
id: '00',
age: 12
}];
//array values... etc
$scope.getCellValue = function(item) {
console.log(item.name);
console.log(item.id);
}
});
<!DOCTYPE html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in students">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button type="button" ng-click="getCellValue(item)">{{item.id}}</button></td>
</tr>
</tbody>
</table>
</body>
</html>
pass the index to that method by using $index
<td><button type="button" ng-click="getCellValue($index)">View</button></td>
getting from controller
$scope.getCellValue = function(index) {
console.log($scope.stutents[index].name);
console.log($scope.stutents[index].id);
}
And also you can get it from #sachila answer :)
var app = angular.module('firstApp', []);
app.controller('myController', function($scope) {
$scope.students = [{
name: 'A',
id: '1',
age: 12
},{
name: 'B',
id: '2',
age: 10
},
{
name: 'C',
id: '3',
age: 22
}];
//array values... etc
$scope.getCellValue = function(index) {
console.log($scope.students[index].id);
}
});
<!DOCTYPE html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in students">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button type="button" ng-click="getCellValue($index)">{{item.id}}</button></td>
</tr>
</tbody>
</table>
</body>
</html>
Related
Im learnign angularJs, and i want to import an array from a json on my controller Like that:
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
promise.then(function (data) {
$scope.todos = data;
});
});
and im using a table to display the data on todos:
<table class="table">
<tr>
<td>Action</td>
<td>Done</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
and this results on the flowing html page:
<!DOCTYPE html>
<html ng-app="demo">
<head>
<title>Example</title>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("demo", []);
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
promise.then(function (data) {
$scope.todos = data;
});
});
</script>
</head>
<body ng-controller="demoCtrl">
<div class="panel">
<h1>To Do</h1>
<table class="table">
<tr>
<td>Action</td>
<td>Done</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
</div>
</body>
The normal way of getting access to the json is from the data within the returned object from the http request - you are tying to use the entire returned object.
I use "response" as the return from the get request - then the data is "response.data". This is needed because there are other properties returned within the response object from the get request.
Try changing your promise to be as follows:
promise.then(function (response) {
$scope.todos = response.data;
});
Also you should be having a thead and th's and tbody in the table to show a more semantically correct table
<table class="table">
<thead>
<tr>
<th scope="col">Action</th>
<th scope="col">Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
Promise return entire response in callback Data is in response.data
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
// Entire response in callback
promise.then(function (response) {
$scope.todos = response.data; // Data is in response.data
});
});
More: https://docs.angularjs.org/api/ng/service/$http
So this is my code
<script>
export default {
name: "app",
data() {
return {
items: []
};
},
created: function() {
this.makeAjaxCall("books.json", "get").then(res => {
this.items = res
return res
}),
this.makeAjaxCall("authors.json", "get").then(resA => {
this.items = resA
return resA
})
},
methods: {
makeAjaxCall:function(url, methodType){
var promiseObj = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open(methodType, url, true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200){
//alert("xhr done ok");
var response = xhr.responseText;
var respJson = JSON.parse(response);
resolve(respJson);
} else {
reject(xhr.status);
//alert("xhr failed");
}
} else {
//alert("xhr processing");
}
}
//alert("request sent succesfully");
});
return promiseObj;
}
}
};
</script>
<template>
<div id="app">
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
<th>Availability</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.books" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img id="imageBook" :src="item.imageUrl"></td>
</tr>
</tbody>
</table>
</div>
</template>
I have the function makeAjaxCall that brings me the books.json, but I want to use it for multiple jsons.
I tried to call it under created, with a different json, authors.json, but it doesn't work.
I guess the syntax is wrong.
I know the function could have been created better, but I would like to keep its initial form or maybe add a parameter to be the json file.(Tried that, but didn't work for me)
Any ideas, pretty please?
To bind the data you have to declare first items: {books:[],authors:[]}
Also you are overwriting this.items use this.items.books and this.items.authors to assign.
Below is the example which works without ajax
new Vue ({
el: "#app",
data() {
return {
items: {books:[],authors:[]}
};
},
created: function() {
this.items.books = this.makeAjaxCall("books", "get");
this.items.authors = this.makeAjaxCall("authors", "get");
},
methods: {
makeAjaxCall:function(url, methodType){
if(url == 'books'){
promiseObj= [{name:'name11',author:'author11',genre:'genre11'},{name:'name12',author:'author12',genre:'genre12'}]
}else{
promiseObj= [{name:'name22',author:'author22',genre:'genre22'}]
}
return promiseObj;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<div id="app">
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.books" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img :src="item.imageUrl"></td>
</tr>
</tbody>
</table>
<table class="authorsTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.authors" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img :src="item.imageUrl"></td>
</tr>
</tbody>
</table>
</div>
So I found the answer, after millions of tries and it's pretty simple.
<script>
import './styling.scss'
export default {
name: "app",
data() {
return {
items: {books:[], authors:[]}
};
},
created: function() {
this.makeAjaxCall("books.json", "get").then(res => {
this.items.books = res.books;
return res;
}),
this.makeAjaxCall("authors.json", "get").then(res => {
this.items.authors = res.authors;
return res;
})
},
methods: {
makeAjaxCall:function(url, methodType){
var promiseObj = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open(methodType, url, true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200){
//alert("xhr done ok");
var response = xhr.responseText;
var respJson = JSON.parse(response);
resolve(respJson);
} else {
reject(xhr.status);
//alert("xhr failed");
}
} else {
//alert("xhr processing");
}
}
//alert("request sent succesfully");
});
return promiseObj;
}
}
};
</script>
<template>
<div id="app">
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
<th>Availability</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.books" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img id="imageBook" :src="item.imageUrl"></td>
<td>
<button class="btn add"> Add</button>
<button class="btn edit"> Edit</button>
<button class="btn delete"> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
I need to update a property in a collection when another property gets changed.
My Collection is
$scope.Persons = [
{
Name: "Emma",
Mode:0,
HasModified:false
},
{
Name: "Watson",
Mode:0,
HasModified:false
},
{
Name: "Harry",
Mode:0,
HasModified:false
}
];
The Property Mode is binded in a md-select, when the user selects any option, then I need to update the property HasModified to true
HTML Section:
<tbody>
<tr ng-repeat="main in Persons">
<td>
<p>{{main.Name}}</p>
</td>
<td>
<md-select ng-model="main.Mode" onselect="UpdateMode(main)">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
</td>
<td>
<p>{{main.HasModified}}</p>
</td>
</tr>
</tbody>
The onselect event fails to update the changes
$scope.UpdateMode = function(collection) {
if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
collection.HasModified = true;
}
}
The Complete HTML Angular Source Code is
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Mode</th>
<th>Has Modified</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="main in Persons">
<td>
<p>{{main.Name}}</p>
</td>
<td>
<md-select ng-model="main.Mode" onselect="UpdateMode(main)" aria-label="{{main.Name}}">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
</td>
<td>
<p>{{main.HasModified}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function ($scope, $http, $q) {
$scope.Persons = [
{
Name: "Emma",
Mode:0,
HasModified:false
},
{
Name: "Watson",
Mode:0,
HasModified:false
},
{
Name: "Harry",
Mode:0,
HasModified:false
}
];
$scope.UpdateMode = function(collection) {
if((collection != null) && (collection != undefined) && (collection.Mode >0)) {
collection.HasModified = true;
}
}
});
</script>
</body>
</html>
Kindly assist me how to update HasModified Property...
There is no such thing as onselect event supported by mdSelect directive. Use ngChange:
<md-select ng-model="main.Mode" ng-change="UpdateMode(main)" aria-label="{{main.Name}}">
<md-option ng-value="1">Good</md-option>
<md-option ng-value="2">Bad</md-option>
</md-select>
I am trying to select all checkboxes with one single checkbox. But how to do that?
This is my HTML:
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<!-- userlist -->
<!--<div id="scrollArea" ng-controller="ScrollController">-->
<table class="table">
<tr>
<th>User ID</th>
<th>User Name</th>
<th>Select</th>
</tr>
<tr ng-repeat="user in users | filter:search">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select"></td>
<td><tt>{{user.select}}</tt><br/></td>
</tr>
</table>
I create an extra checkbox to selecet and unselect all checkboxes.
JS:
.controller('UsersCtrl', function($scope, $http){
$http.get('users.json').then(function(usersResponse) {
$scope.users = usersResponse.data;
});
$scope.checkAll = function () {
angular.forEach($scope.users, function (user) {
user.select = true;
});
};
});
I tried this too, but none of them works for me :(
$scope.checkAll = function () {
angular.forEach($scope.users, function (user) {
user.select = $scope.selectAll;
});
};
You are missed the container divs with ng-controller and ng-app and angular.module.
user.select = $scope.selectAll is the correct variant.
https://jsfiddle.net/0vb4gapj/1/
Try setting the checked boxes against each user to be checked when the top checkbox is checked:
<input type="checkbox" ng-model="selectAll"/>
<table class="table">
<tr>
<th>User ID</th>
<th>User Name</th>
<th>Select</th>
</tr>
<tr ng-repeat="user in users | filter:search">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td><input type="checkbox" ng-click="usersetting(user)" ng-model="user.select" ng-checked="selectAll"></td>
<td><tt>{{user.select}}</tt><br/></td>
</tr>
</table>
Here is a JSFiddle you can use ng-checked with a variable on it like user.checked (or use the user.select as you want)
<div ng-app="app" ng-controller="dummy">
<table>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>
<input type="checkbox" ng-click="usersetting(user)" ng-checked="user.checked" ng-model="user.select">
</td>
<td><tt>{{user.select}}</tt>
<br/>
</td>
</tr>
</table>
<button ng-click="checkAll()">Check all</button>
</div>
JS:
var app = angular.module("app", []);
app.controller('dummy', function($scope) {
$scope.users = [{
id: 1,
name: "Hello",
select: 1
}, {
id: 2,
name: "World",
select: 1
}, ];
$scope.checkAll = function() {
angular.forEach($scope.users, function(user) {
user.checked = 1;
});
}
});
Simple use the following code
HTML
<input type="checkbox" ng-model="checkboxes.checked" data-ng-click="checkAll()" class="select-all" value="" />
JS
$scope.checkAll = function() {
angular.forEach($scope.users, function(item) {
$scope.checkboxes.items[item._id] = $scope.checkboxes.checked;
$scope.selection.push(item._id);
});
}
I have variable $scope.myData in controller and passed it to the html view. But I want a format like this:
Seatno name Seatno name Seatno name Seatno name
1 Scott tooker 2 Mary Tooker 3 Lea 4 Gina
5 Aldrin Sorian 6 Ria Caballes 7 Yuna 8 Anna
9 ..... 10 .... 11 ..... 12 ....
But the format shows was wrong. How can I do that format? Any help would be appreciated.Thanks.
var installApp = angular.module("installApp", []);
installApp.controller("SeatingmanifestreportCtrl", function ($scope) {
'use strict';
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.myData = [
{
seatno:'1',
name:'Cristina Tooker',
ticketnNo:"abc456",
insuranceNo:34
},
{
seatno:'2',
name:'Malanie Laparga',
ticketnNo:"abc231",
insuranceNo:90
},
{
seatno:'3',
name:'Luna Marie',
ticketnNo:"abc324",
insuranceNo:35
},
{
seatno:'4',
name:'Hayes Dave',
ticketnNo:"abc221",
insuranceNo:91
},
{
seatno:'5',
name:'Scott Tooker',
ticketnNo:"abc453",
insuranceNo:36
},
{
seatno:'6',
name:'Malanies Santos',
ticketnNo:"abc241",
insuranceNo:93
},
{
seatno:'7',
name:'Luna Marie Landiola',
ticketnNo:"abc322",
insuranceNo:39
},
{
seatno:'8',
name:'David Marine',
ticketnNo:"abc222",
insuranceNo:92
},
];
console.log($scope.myData);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="installApp">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="SeatingmanifestreportCtrl" data-ng-init="init()">
<table width="100%" border="1">
<colgroup span="7"></colgroup>
<tbody>
<tr ng-repeat="value in myData">
<td>{{value.seatno}}</td>
<td>{{value.name}}</td>
</td>
</tr>
</tbody>
</table>
<script src="angular.min.js"></script>
<script src="seatingmanifestreport.js"></script>
Plunker link "http://plnkr.co/edit/NsW2KWzYpJKnslk4YmmP?p=preview"
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="check">
<table cellpadding="2">
<thead>
<tr>
<th ng-repeat="j in getLength(4) track by $index">SeatNo Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in getLengthData() track by $index">
<td ng-repeat="data in getArray($index)">{{data.seatno}} {{data.name}}</td>
</tr>
</tbody>
</table>
<script>
var app=angular.module("myApp",[]);
app.controller('check', function($scope){
$scope.getLength=function(number){
return new Array(number);
};
$scope.getLengthData=function(){
return new Array($scope.myData.length/2);
};
$scope.getArray=function(index){
var temparray;
temparray= $scope.myData.slice(index*4,index*4+4);
return temparray;
}
$scope.myData = [
{
seatno:'1',
name:'Cristina Tooker',
ticketnNo:"abc456",
insuranceNo:34
},
{
seatno:'2',
name:'Malanie Laparga',
ticketnNo:"abc231",
insuranceNo:90
},
{
seatno:'3',
name:'Luna Marie',
ticketnNo:"abc324",
insuranceNo:35
},
{
seatno:'4',
name:'Hayes Dave',
ticketnNo:"abc221",
insuranceNo:91
},
{
seatno:'5',
name:'Scott Tooker',
ticketnNo:"abc453",
insuranceNo:36
},
{
seatno:'6',
name:'Malanies Santos',
ticketnNo:"abc241",
insuranceNo:93
},
{
seatno:'7',
name:'Luna Marie Landiola',
ticketnNo:"abc322",
insuranceNo:39
},
{
seatno:'8',
name:'David Marine',
ticketnNo:"abc222",
insuranceNo:92
},
];
});
</script>
</body>
</html>
You can use ng-if="$even" and ng-if="$odd"
<table width="100%" border="1">
<colgroup span="7"></colgroup>
<tbody>
<tr ng-repeat="value in myData " ng-if="$even">
<td>{{value.seatno}}</td>
<td>{{value.name}}</td>
</tr>
<tr ng-repeat="value in myData " ng-if="$odd">
<td>{{value.seatno}}</td>
<td>{{value.name}}</td>
</tr>
</tbody>
</table>