I am using MEAN stack in my application with AngularJS as my front-end. How to ng-bind the totalsum of value into another input in Agularjs , Actually we have a table and we have used filter to get the totalsum value for Sprice, then we also got sprice totalsum value like 250, then what we exactly expecting is we need to bind this totalsum value into another ng-module input.... for example:- sprice totalsum value is 250, expecting answer of ng-bind value is totalsum value like 250 ...My Plunker. we don't know where we have done the mistake so please look into plunker and help us..
we have a table, in the table we have used filter functionality to get the totalsum value for sprice,we got the answer like 250 using of this <td>{{resultValue | sumOfValue:'sprice'}}</td>.
what we expecting we need to bind the sprice totalsum value to another ng-module like sprice_total input..expecting answer 250...
I have given the plunker as reference plunker please any one knows the solution help us.
My controller:-
sprice totalsum filter:-
.filter('sumOfValue', function () {
return function (data, key) {
debugger;
if (angular.isUndefined(data) && angular.isUndefined(key))
return 0;
var sum = 0;
angular.forEach(data,function(v,k){
if(v.confirm=='cancelled'){
sum = sum + parseFloat(v[key]);
}
});
return sum.toFixed(2);
}
})
My Html:-
<tr ng-repeat="ram in resultValue=(order.orderfood) | filter: {confirm: '!cancelled'}">
<td>{{$index + 1}}</td>
<td>{{ram.sprice }}</td>
</tr>
<tr>
<td>sum</td>
<td>{{resultValue | sumOfValue:'sprice'}}</td>
</tr>
I have tried to use the ng-bind to get the value to another input like :-
<input type="text" ng-model="sprice_total" ng-bind="sprice_total={{resultValue | sumOfValue:'sprice'}}">
please update the plunker as well to know the solution... thanks..
Had created myModelValue directive that will assign your expression to ng-model object
Following is reference link
var app = angular.module('plunker', []);
app.directive('myModelValue', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel'
},
link: function (scope, element, attr, controller) {
attr.$observe('myModelValue', function (finalValue) {
scope.model = finalValue;
});
}
};
});
app.filter('sumOfValue', function () {
return function (data, key) {
debugger;
if (angular.isUndefined(data) && angular.isUndefined(key))
return 0;
var sum = 0;
angular.forEach(data, function (v, k) {
if (v.confirm == 'cancelled') {
sum = sum + parseFloat(v[key]);
}
});
return sum.toFixed(2);
}
}).controller('MainCtrl', function ($scope) {
$scope.order =
{
"_id": "5836b64083d9ce0f0078eae8",
"user": {
"_id": "579bdf6123f37f0e00a40deb",
"displayName": "Table 1"
},
"__v": 8,
"total": "1824",
"ordercar": [],
"orderfood": [
{
"qty": "1",
"confirm": "placed",
"sprice": 250,
"price": 250,
"customise": "With Onion,Without Onion",
"name": "Baasha Pizza"
},
{
"qty": "1",
"confirm": "cancelled",
"sprice": 250,
"price": 250,
"customise": "With Onion,Without Onion",
"name": "Baasha Pizza"
}
],
"phone": null,
"order_source": "",
"comment": "",
"payment_mode": "",
"nop": null,
"rating": null,
"bill": false,
"complete": false,
"laundry": false,
"clean": false,
"roomservice": false,
"napkin": false,
"waiter": false,
"water": false,
"name": "fgg",
"created": "2016-11-24T09:43:28.413Z",
"isCurrentUserOwner": true
}
});
/* Put your css in here */
body {
font-size: 14px;
}
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
td{
padding: 2px;
}
.servicetaxinclusivetrue:before{
color: green!important;
content: "\f00c";
}
.servicetaxinclusivefalse:before{
color: red!important;
content: "\f00d";
}
.servicetaxexclusivetrue:before{
color: green!important;
content: "\f00c";
}
.servicetaxexclusivefalse:before{
color: red!important;
content: "\f00d";
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-table="tableParams" class="table table-bordered ">
<thead>
<tr>
<th rowspan="2">s.no</th>
<th rowspan="2"> sprice </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ram in resultValue=(order.orderfood) | filter: {confirm: '!cancelled'}">
<td>{{$index + 1}}</td>
<td>{{ram.sprice }}</td>
</tr>
<tr>
<td>sum</td>
<td>{{resultValue | sumOfValue:'sprice'}}</td>
</tr>
</table>
<input type="text" ng-model="sprice_total" my-model-value="{{resultValue | sumOfValue:'sprice'}}">
</body>
</html>
Hope this is what you where expecting
Related
Using DataTable API, I am creating a table & adding a button - 'Click' to each table row. Example link below:
https://datatables.net/examples/ajax/null_data_source.html
On the click I am changing text to 'View'. So, after page reload, rather all the buttons displaying default text - 'Click', how to render some buttons with text - 'Click' while the others which were clicked with - 'View'. Experts please share your inputs!!
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"type": "get",
"url": "https://jsonplaceholder.typicode.com/todos",
"dataType": "json",
"dataSrc": function (json) {
var return_data = new Array();
for (var i = 0; i < json.length; i++) {
return_data.push({
'userId': json[i].userId,
'id': json[i].id,
'title': "Test Data"
})
}
return return_data;
}
},
"columns": [
{ 'data': 'userId' },
{ 'data': 'id' },
{ 'data': 'title' },
{ 'data': null }
],
"columnDefs": [
{ targets: 0, className: 'dt-body-center'},
{ targets: 1, className: 'dt-body-center'},
{ targets: 2, className: 'dt-body-center'},
{ targets: -1, width: "150px",
className: 'dt-body-center', defaultContent:
"<button id='btnDetails'>Click</buttom>" }
]});
$('#example tbody').on('click', '[id*=btnDetails]', function () {
$(this).text("View");
});
});
<html>
<head>
<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="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"> </script>
</head>
<body>
<table id="example" class="display cell-border compact stripe" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Id</th>
<th>Title</th>
<th>Status</th>
</tr>
</thead>
</table>
</body>
</html>
You need a database to persist the state of button. Check below link for server-side processing:
https://datatables.net/examples/data_sources/server_side.html
I have datatable with couple of row, such as Description,ShortDescription,User,Type etc....
Once user create a long in column Description the row is very ugly and content is unreadable.
So my idea is when text is more then 20 character long put ... which will be <a> anchort tag and it will display text, something like page-break. I try to find some usefull post here but unfortunettly I couldn't
REFERENCE
So far here is DEMO of my table
DEMO
Here is picture
So something like add in <td> option when text is longer then 20 character option Show More / Show Less
Any help ? Any guide ?
And here is my source code:
var dataTable;
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Manager/Ticket/GetAll"
},
"columns": [
{
"data": "description",
"width": "15%",
"render": function () {
return 'Vise'
}
},
{ "data": "shortDescription", "width": "10%" },
{ "data": "dateAndTime", "width": "10%" },
{ "data": "ticketType.name", "width": "10%" },
{ "data": "status", "width": "10%" },
{
"data": "applicationUser.name",
"width": "10%",
"render": function (data) {
return '<a id="' + data + '" class="text-info user-details" data-toggle="modal" data-target="#userDetails" href="' + data + '" target_blank>' + data + '</a>'
}
},
{
"data": "id",
"render": function (data) {
return `
<div class="text-center">
<a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-info-circle">Detalji/Chat</i>
</a>
<a href="/Manager/Ticket/Upsert/${data}" class="btn btn-primary text-white" style="cursor:pointer">
<i class="fas fa-edit">Uredi</i>
</a>
</div>
`;
}, "width": "15%"
}
]
});
}
JS function
$(document).ready(function () {
$(".td").hide();
$(".showmore").on("click", function () {
var txt = $(".table-info").is(':visible') ? 'Vise' : 'Manje';
$(".showmore").text(txt);
$(this).next('.table-info').slideToggle(200);
});
});
Here is table
<div class="p-4 border rounded">
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<thead class="thead-dark">
<tr class="table-info">
<th>Opis</th>
<th>Kratak Opis</th>
<th>Datum i vrijeme slanja</th>
<th>Vrsta Tiketa</th>
<th>Status</th>
<th>Korisnik</th>
<th></th>
</tr>
</thead>
</table>
</div>
I have dataTable and returns correct data, but the UI is my problem meaning it does not have columns and sorting are not looking good, here is my logic below and need some help to make look good. I have also attached the back end code for clarity as to why this code, User Interface does not have rows with data grid columns.
[![enter image description here][1]][1]
<!--Building some table here that filters data from db-->
<div style="width:90%; margin:0 auto;">
<table id="eNtsaCourseLists">
<thead>
<tr>
<th>Id</th>
<th>Course</th>
<th>Nickname</th>
<th>Term</th>
<th>Published</th>
<th>CourseLicence</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
</center>
<!--Javascript functionality for dataTable-->
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(function () {
$("#eNtsaCourseLists").dataTable({
"ajax": {
"url": "/Home/loadTableResults",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autowidth": true },
{ "data": "Course", "autowidth": true },
{ "data": "Nickname", "autowidth": true },
{ "data": "Term", "autowidth": true },
{ "data": "Published", "autowidth": true },
{"data": "CourseLicence", "autowidth":true}
]
});
});
</script>
public ActionResult loadTableResults()
{
//RegCoursesViewModel regCourses = new RegCoursesViewModel();
using (eNtsaRegistration_2 vb = new eNtsaRegistration_2())
{
var data = vb.Courses.OrderBy(n => n.Course).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}
}
[1]: https://i.stack.imgur.com/wF76c.png
I have 2 json 1 for face.json and another for data.json I want when i click on face so data filter from data.json by face id. Face id also exist in data.json
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('mainHotelData.json').success(function(data) {
$scope.mainHotelData = data;
});
$http.get('face.json').success(function(data) {
$scope.faces = data;
});
});
Face HTML
<div class="faces">
<div ng-repeat = "face in faces">
<img src="Ratings/faces/{{face.fcImg}}">
</div>
</div>
Data HTML
<table>
<tr ng-repeat="data in mainHotelData | filter:query">
<td>{{data.hName}}</td>
<td>{{data.hLocation}}</td>
</tr>
</table>
How to filter?
HTML page including angularJS code
<!DOCTYPE html>
<html ng-app="countryApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="CountryCtrl">
<div class="faces">
<div ng-repeat="face in faces">
<img src="Ratings/faces/{{face.fcImg}}">
</div>
</div>
<table>
<tr ng-repeat="data in mainHotelData | filter:query">
<td>{{data.hName}}</td>
<td>{{data.hLocation}}</td>
</tr>
</table>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http) {
$http.get('mainHotelData.json').success(function (data) {
$scope.mainHotelData = data.records;
});
$http.get('face.json').success(function (data) {
$scope.faces = data.records;
});
$scope.search = function (id) {
$scope.query = id;
}
});
</script>
</body>
</html>
face.json
{
"records": [
{ "id": 1, "fcImg": "faceImg1.png" },
{ "id": 2, "fcImg": "faceImg3.png" },
{ "id": 3, "fcImg": "faceImg2.png" }
]
}
mainHotelData.json
{
"records": [
{ "hName": "Name1", "hLocation": "Location1", "hFcId": 1 },
{ "hName": "Name2", "hLocation": "Location2", "hFcId": 2 },
{ "hName": "Name3", "hLocation": "Location3", "hFcId": 3 },
{ "hName": "Name4", "hLocation": "Location4", "hFcId": 2 },
{ "hName": "Name5", "hLocation": "Location5", "hFcId": 1 },
{ "hName": "Name6", "hLocation": "Location6", "hFcId": 3 },
{ "hName": "Name7", "hLocation": "Location7", "hFcId": 1 },
{ "hName": "Name8", "hLocation": "Location8", "hFcId": 2 }
]
}
You might need to modify a bit if your json file format is different.
I have the following json data in my application:
{
"Success":true,
"Error":null,
"Data":{
"VersionId":1,
"SecretaryId":1,
"SecretaryName":"Foo",
"Status":1,
"Schools":[
{
"SchoolId":123456,
"SchoolName":"Equipe de Desenvolvimento do Portal",
"ContractStatus":1,
"TotalTeachers":2,
"TotalStudents":0,
"Grades":[
{
"GradeId":1,
"GradeName":"2º Year",
"TotalStudents":0,
"Classes":[
{
"SelectedYear":{
"AvailableYear":null,
"Contract":null,
"Id":2,
"Canceled":false,
"EngagedAreas":null,
"Registrations":null
},
"Id":2,
"Name":"A",
"TotalStudents":20,
"TotalA3":1,
"StudentsPCD":"1,2,3"
},
{
"SelectedYear":{
"AvailableYear":null,
"Contract":null,
"Id":2,
"Canceled":false,
"EngagedAreas":null,
"Registrations":null
},
"Id":3,
"Name":"B",
"TotalStudents":25,
"TotalA3":0,
"StudentsPCD":"1"
}
]
},
{
"GradeId":2,
"GradeName":"3º Year",
"TotalStudents":0,
"Classes":[
]
},
{
"GradeId":3,
"GradeName":"4º Year",
"TotalStudents":0,
"Classes":[
]
}
]
},
{
"SchoolId":52640002,
"SchoolName":"EscTesRelatDir",
"ContractStatus":0,
"TotalTeachers":0,
"TotalStudents":0,
"Grades":[
{
"GradeId":1,
"GradeName":"2º Year",
"TotalStudents":0,
"Classes":[
]
},
{
"GradeId":2,
"GradeName":"3º Year",
"TotalStudents":0,
"Classes":[
]
}
]
}
]
}
}
I use this json to dynamically create some HTML.
For each school a div is created, this is the first level. For each grade in the school, a table is created, this is the second level. And for each class in the grade a table row is created, this is the third level.
I'm wondering how could I use the ng-show command to show the first level div only if the related school have at least one class.
I've searched a lot, but I couldn't find an answer yet.
EDIT:
Here is my html code.
<div ng-repeat="school in data.schools" ng-show="{{ school.Grades.<AnyClass?>.length > 0 }}">
<h2>{{ school.SchoolName }}</h2>
<span><strong>Total Teachers:</strong> {{ school.TotalTeachers }}</span>
<table ng-repeat="grade in school.Grades" class="table table-bordered table-striped table-condensed" ng-show="{{ grade.Classes.length > 0 }}">
<tbody>
<tr>
<th colspan="4">{{ grade.GradeName }}</th>
</tr>
<tr>
<th>Class</th>
<th>Total Students</th>
<th>Total A3</th>
<th>PCD Students</th>
</tr>
<tr ng-repeat="class in grade.Classes">
<td>{{ class.Name }}</td>
<td>{{ class.TotalStudents }}</td>
<td>{{ class.TotalA3 }}</td>
<td>{{ class.StudentsPCD }}</td>
</tr>
</tbody>
</table>
</div>
EDIT
This is how I'm making my requests:
//rest_client.js
"use strict";
(function(){
var restClient = angular.module("restClient", ["ngResource"]);
var serviceURL = "/habileapp/api/";
restClient.factory("RegistrationResource", ["$resource", function ($resource) {
return $resource(serviceURL + "Registration", null, {
"get": {
"method": "get"
},
"save": {
"method": "post",
"url": serviceURL + "Registration/Save"
},
"finalize": {
"method": "post",
"url": serviceURL + "Registration/Finalize"
}
});
}]);
})();
//part of app.js
RegistrationResource.get({
"idAplicacao": 1,
"idSecretaria": 1
}, function (data) {
if (data.Success) {
$scope.data = data.Data;
runApplication();
} else {
toastr.error(Errors.Code1);
}
hideLoading();
});
I don't think it is possible within your template since you cannot bubble up through the different ng-repeats. But you could add another attribute to each school object whether its Classes array length is greater than 0 within your controller:
//part of app.js
RegistrationResource.get({
"idAplicacao": 1,
"idSecretaria": 1
}, function (data) {
if (data.Success) {
angular.forEach(data.Schools, function(item) {
angular.forEach(item.Grades, function(item2) {
(item2.Classes.length > 0) && item.show = true;
});
});
$scope.data = data.Data;
runApplication();
} else {
toastr.error(Errors.Code1);
}
hideLoading();
});
Then, just add ng-show="show" in your markup.
After getting the data you can change it or add any "helper" properties that you can use to control the elements you want to show or how to show them. Consider the following example which makes any entry red that has a "long title", being more than 40 characters:
HTML template
<body ng-controller="Ctrl">
<b><u>Posts</u></b>
<div ng-repeat="post in posts">
<span ng-class="{ 'red': post.longTitle }">
id:{{ post.id }} title:{{ post.title }}
</span>
</div>
</body>
JavaScript
app.controller('Ctrl', function($scope, $http) {
var url = 'http://jsonplaceholder.typicode.com/posts';
// get data
$http.get(url).then(function(response) {
// take top 10
var data = response.data.slice(0, 10);
// add helper property called "long title" that
// doesn't exists in original data
angular.forEach(data, function(current) {
current.longTitle = current.title.length > 40 ? true : false;
});
// apply
$scope.posts = data;
});
});
CSS
.red {
color: red;
}
Result