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>
Related
I am trying to add a row to a HTML table from JSON input using AJAX. I only want specific columns added. I am able to get the table to show; however the rows are not added.
Please see below for the HTML and AJAX (with the returned JSON).
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="js/table2excel.js"></script>
<link rel="stylesheet" href="style.css">
<script src="js/tableTest.js"></script>
</head>
<body>
<p><button id="btn-export">Export</button></p>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Activity Name</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td id='adActivityName'></td>
<td id='adStartDate'></td>
<td id='adEndDate'></td>
</tr>
</tbody>
</table>
</body>
</html>
AJAX (with JSON):
function e1ActivitySelect() {
var dataToBeSent = {
ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
ssAccountID : sessionStorage.getItem('ssAccountID'),
ssArchived : sessionStorage.getItem('ssArchived'),
};
$.ajax({
url: "E1ActivitySelectView",
data : dataToBeSent,
type: "POST",
cache: false
})
.fail (function(jqXHR, textStatus, errorThrown) {
$('#ajaxGetUserServletResponse').text('An error occured getting the Activity information.');
})
.done(function(responseJson1a) {
dataType: "json";
// alert(JSON.stringify(responseJson1a));
// [{"adId":"2","grpId":"2","adActivityID":"2","adActivityName":"Visit Ryde Fire Station","adStartDate":"2017-05-24","adEndDate":"2017-05-24"}]
for (i=0; i < responseJson1a.length; i++) {
$('#adActivityName').append("<td>"+a[i].adActivityName+"</td>");
$('#adStartDate').append("<td>"+a[i].adStartDate+"</td>");
$('#adEndDate').append("<td>"+a[i].adEndDate+"</td>");
}
});
}
You are Not appending table rows in a proper way
When you have multiple rows to append you need to create multiple row tags and append the data like this
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Activity Name</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody id="mytablebody">
</tbody>
</table>
Javascript:
function e1ActivitySelect() {
var dataToBeSent = {
ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
ssAccountID : sessionStorage.getItem('ssAccountID'),
ssArchived : sessionStorage.getItem('ssArchived'),
};
$.ajax({
url: "E1ActivitySelectView",
data : dataToBeSent,
type: "POST",
cache: false
})
.fail (function(jqXHR, textStatus, errorThrown) {
$('#ajaxGetUserServletResponse').text('An error occured getting the Activity
information.');
})
.done(function(responseJson1a) {
var tablebody = "";
try{
for (i=0; i < responseJson1a.length; i++) {
tablebody += "<tr><td>"+responseJson1a[i].adActivityName+"</td><td>"++responseJson1a[i].adStartDate+"</td><td>"++responseJson1a[i].adEndDate+"</td></tr>";
}
$("#mytablebody").empty();
$("#mytablebody").append(tablebody);
}
catch(e){
console.log(e);
}
});
}
All together HTML with js work for custom filter. Here I am taking example of books with click filter when we click on subject name it filter
angular.module('testApp', []).controller('namesCtrl', function($scope) {
$scope.names = [{
name: 'Hindi'
},
{
name: 'Math'
},
{
name: 'English'
},
{
name: 'Science'
},
{
name: 'Computer'
},
{
name: 'History'
},
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<font size="3" color="red">
<p>Click the table headers to change the sorting order:</p>
</font>
<div ng-app="testApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Subject Name</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
</tr>
</table>
</div>
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>
I'm pretty new to angularjs.So,please kindly ignore if there are any errors.Here I have one dropdownlist within ng-repeat if I select the values in dropdownlist the corresponding Item code and the selected description from dropdownlist should pass to angularcontroller and I need to post it to the mvc controller
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope',function ($scope, $http,$rootScope) {
$scope.values = [{
Code: 1,
Description: 'Apple'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Mango'
}, {
COde: 4,
Description: 'Guva'
}
];
$scope.ddlrhs = '';
$scope.data = [{
Code: 1,
Description: 'Red'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Yellow'
}, {
Code: 4,
Description: 'Green'
}
];
$scope.submit = function ()
{
$scope.list = [];
for (var i = 0; i < $scope.values.length; i++) {
var j = "";
$scope.list.push({
VALUE: $scope.values[i].Code,
Description: $scope.myForm.items[i].Description
})
}
$http({
method: "POST",
url: "/Controller/Save",
data:
$scope.list
})
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div id="dvcollection" ng-App="myApp" ng-controller="ctrl" >
<form name="myForm" >
<table id="tblcollections">
<thead>
<tr >
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="myForm.items[$index]" ng-options=" element.Description for element in data ">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()"style="float:right;" >
</td>
</tr>
</tbody>
</table>
</form>
</div>
Hey May be this might be your expectation
<div ng-app="myApp" >
<div id="dvcollection" ng-controller="ctrl">
<form name="myForm">
<table id="tblcollections">
<thead>
<tr>
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="itemssample" ng-options=" element.Description for element in data " ng-change="pushingelement(item.Code,itemssample.Code)">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()" style="float:right;">
</td>
</tr>
</tbody>
</table>
</form>
<div> This is written to ensure that mapping is stored or not. (Not necessary)
<p ng-repeat="item in list">
Mapping of {{$index}} element {{item.ItemCode}} -> {{item.ColorCode}}
</p>
</div>
</div>
</div>
Ensure that your MVC Controller should have a model as
public class MapperClass
{
public int ItemCode { get; set; }
public int ColorCode { get; set; }
}
SCRIPT
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {
$scope.list = [];
$scope.values = [
{ Code: 1, Description: 'Apple' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Mango' },
{ Code: 4, Description: 'Guva' }
];
$scope.ddlrhs = '';
$scope.data = [
{ Code: 1, Description: 'Red' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Yellow' },
{ Code: 4, Description: 'Green' }
];
$scope.pushingelement = function (itemCode, colorCode) {
var temp = { "ItemCode": itemCode, "ColorCode": colorCode };
$scope.list.push(temp);
console.log($scope.list);
}
$scope.submit = function () {
$http({
method: "POST",
url: "/Controller/Save",
data:
object:$scope.list
})
}
}
]);
TRY ONCE I HOPE IT HELPS YOU
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>get selected value from dropdownlist in angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Red'
}, {
id: '2',
name: 'Green'
}, {
id: '3',
name: 'Orange'
}, {
id: '4',
name: 'Yellow'
}];
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
Select Name:
<select data-ng-model="ddlvalue">
<option value="">--Select--</option>
<option data-ng-repeat="t in sample" value="">{{t.name}}</option>
</select>
</form>
</body>
</html>
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>