I have this kind of JSON data. This data is fetched from MongoDB. I want to print that on EJS page.
[ { _id: 59157619e9bcd218d9dd4dba,
que: 'Overall how satisfied are you with the product?',
type: 'radio',
options: [ 'Not at all satisfied', 'satisfied', 'Very much satisfied ' ] } ]
options would be radio button.
suppose you have get api like this.
app.get('/testing', function (req, res) {
var array = [{
_id: '59157619e9bcd218d9dd4dba',
que: 'Overall how satisfied are you with the product?',
type: 'radio',
options: ['Not at all satisfied', 'satisfied', 'Very much satisfied ']
}]
res.render('load', array);
//load is the ejs file (load.ejs) and array is the array of object.
});
Suppose this is your ejs file and you want to send this array in ejs file.like...
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
table, td, th {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
</style>
</head>
<body>
<h2><%= HeadLine %></h2>
<table>
<tr style='background-color: gainsboro;'>
<th>Id</th>
<th>question</th>
<th>type</th>
<th>options</th>
</tr>
<% array.forEach(function(data) { %>
<tr>
<td >
<p><%= data.seq %></p>
</td >
<td>
<p><%= data.id %></p>
</td>
<td >
<p> <%= data.question %></p>
</td >
<td >
<p><%= data.type %></p>
</td >
<td >
<p> <%= data.options %></p>
</td >
</tr>
<% }); %>
</table>
</body>
</html>
You need to pass the json data to the ejs file from the router file, this might help-
router.js
router.get('/radio', function(req, res) {
var data = [ { _id: 59157619e9bcd218d9dd4dba, que: 'Overall how satisfied are you with the product?', type: 'radio', options: [ 'Not at all satisfied', 'satisfied', 'Very much satisfied ' ] } ]; //replace this with the service getting data
res.render('radio/show', data);
})
ejs file - radio.js
<form>
<input type="radio" checked><%= data.options[0] %><br>
<input type="radio"><%= data.options[1] %><br>
<input type="radio"><%= data.options[2] %><br>
</form>
Related
I'm using AngularJS 1.7.5, x-editable, and smart table. Inside of a table row I have an anchor which opens a select via x-editable. I am also enabling row selection in smart table.
The problem is that I am unsure of how to stop the click event from the select from propogating and selecting or deselecting the table row. I have written a directive to suppress the click from the A element which opens the select, but the select is created by the x-editable library (e.g. not in my HTML.)
https://plnkr.co/edit/kAKbgLg05uBA9etICxV7?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery#*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script data-require="angular.js#1.7.0" data-semver="1.7.0" src="https://code.angularjs.org/1.7.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
<script data-require="xeditable#*" data-semver="0.1.8" src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link data-require="bootstrap-css#3.3.7" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myController as $ctrl">
<table st-table="collection" class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Secret Identity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in collection" st-select-row="row" st-select-mode="multiple">
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>
<a href="#" editable-select="row.secretIdentity" data-value="{{ row.secretIdentity }}" class="editable editable-click" buttons="no" mode="inline" e-ng-options="i for i in options" stop-event="click">
{{ row.secretIdentity }}
</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
angular
.module('myApp', ['xeditable', 'smart-table', 'ui.bootstrap'])
.controller('myController', ['$scope', 'editableOptions', function($scope, editableOptions) {
editableOptions.theme = 'bs3';
$scope.collection = [{
name: 'Ed',
id: 1,
secretIdentity: 'Just some guy'
}, {
name: 'Tony',
id: 2,
secretIdentity: 'Iron Man'
}, {
name: 'Steve',
id: 3,
secretIdentity: 'Captain America'
}, {
name: 'Bruce',
id: 4,
secretIdentity: 'Hulk'
}, {
name: 'Clint',
id: 5,
secretIdentity: 'Hawkeye'
}, {
name: 'Natasha',
id: 6,
secretIdentity: 'Black Widow'
}, ];
$scope.options = ['Iron Man', 'Captain America', 'Hulk', 'Black Widow', 'Hawkeye', 'Just some guy'];
}])
.directive('stopEvent', () => {
return {
restrict: 'A',
link: (scope, element, attr) => {
if (attr && attr.stopEvent) {
element.bind(attr.stopEvent, e => {
e.stopPropagation();
});
}
}
};
});
Is there a standard way for manipulating elements created by x-editable which will also play nice with AngularJS?
You can wrap your <a> in a <div> and add your stop-event directive to that div.
<td>
<div stop-event="click">
<a href="#"
editable-select="row.secretIdentity"
data-value="{{ row.secretIdentity }}"
class="editable editable-click"
buttons="no"
mode="inline"
e-ng-options="i for i in options"
>
{{ row.secretIdentity }}
</a>
</div>
</td>
I 'm working on my AngularFire project. I've a database something like this https://dinosaur-facts.firebaseio.com/. What I'm doing is first searching the key like the dinosaurs child such as "linhenykus" and storing its keys and values to other $scope variable.
my code in controller
var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs" + "/" + $scope.dinoID); //$scope.dinoID is variable containg dino keys
$scope.detRef = $firebaseArray(ref);
I'm getting the output like
[{"$value":-85000000,"$id":"appeared","$priority":null},{"$value":0.6,"$id":"height","$priority":null},{"$value":1,"$id":"length","$priority":null},{"$value":"theropoda","$id":"order","$priority":null},{"$value":-75000000,"$id":"vanished","$priority":null},{"$value":3,"$id":"weight","$priority":null}]
How to fetch the keys and values?
Use ngRepeat directive, as below:
<tr ng-repeat="obj in array track by $index">
To filter the array you can use the filter of Angular:
<tr ng-repeat="obj in array | filter: criteria track by $index">
Here's an example:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$filter'];
function MainCtrl($scope, $filter) {
$scope.criteria = {};
$scope.array = [
{
"$value":-85000000,
"$id":"appeared",
"$priority":null
},
{
"$value":0.6,
"$id":"height",
"$priority":null
},
{
"$value":1,
"$id":"length",
"$priority":null
},
{
"$value":"theropoda",
"$id":"order",
"$priority":null
},
{
"$value":-75000000,
"$id":"vanished",
"$priority":null
},
{
"$value":3,
"$id":"weight",
"$priority":null
}
];
$scope.getObj = function(value, id) {
$scope.obj = $filter('filter')($scope.array, {
"$value": value,
"$id": id
})[0];
}
$scope.getObj("theropoda", "order");
}
})();
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" placeholder="Search by value" ng-model="criteria.$value">
<input type="text" placeholder="Search by id" ng-model="criteria.$id">
<!-- Note that this button is just as an example to change the object displayed below -->
<button type="button" ng-click="getObj()">Change the value of object</button>
<hr>
Obj: <span ng-bind-template="Value: {{obj.$value}}, Id: {{obj.$id}}"></span>
<p></p>
<table width="100%">
<thead>
<tr>
<th>Value</th>
<th>Id</th>
<th>Priority</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in array | filter: criteria track by $index">
<td ng-bind="obj.$value"></td>
<td ng-bind="obj.$id"></td>
<td ng-bind="obj.$priority"></td>
</tr>
</tbody>
</table>
</body>
</html>
In this plunk I have a simple ngTable. I need to customize the buttons that allow the user to select the number of rows shown in the table. For example, if you click on "10" there's an inner shadow, I need to get rid of it. I see that it's a Bootstrap button but can't figure out how to change it. Any ideas?
HTML
<div ng-controller="myCtl" ng-app="app">
<table ng-table="tableParams" class="table table-bordered">
<tbody>
<tr ng-repeat="u in $data">
<td title="'User ID'">{{ u.uid }}</td>
<td title="'Name'">{{ u.nm }}</td>
<td title="'Group'">{{ u.ugr }}</td>
</tr>
</tbody>
</table>
</div>
Javascript
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope, NgTableParams) {
$scope.data = [{
uid: 'User 1',
nm: 'Name 1',
ugr: 'Group 1'
}, {
uid: 'User 2',
nm: 'Name 2',
ugr: 'Group 2'
}];
$scope.tableParams = new NgTableParams({
count: 5
}, {
data: $scope.data
});
});
Add this css
.btn-default:active, .btn-default.active {
background : white !important;
}
I have a table which I'm trying to create from a scope-object that I'm creating in my controller.
I would like the headers to take the value from 'rowHeader', which works fine. But the problem is that I wan't my cell values to be taken from 'cellValue' property.
In my fiddle I've added a "Desired table", thats how I would like the results to be in my first approach. If possible..
As you can see I would like to use a filter on one of the columns as well.
The reason that I would like to use this approach is so that I can use the checkboxlist to hide/show columns, and of course so that I can setup my table easy within the controller
Fiddle: http://jsfiddle.net/HB7LU/21469/
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<p>My table</p>
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.rowHeader"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows" border="1">
<td ng-repeat="column in columns" ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.rowHeader}}
</div>
</div>
<script>
var app = angular.module('plunker', []);
app.filter('percentage', function () {
return function (changeFraction) {
return (changeFraction * 100).toFixed(2) + "%";
}
});
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [
{ checked: true, cellValue: 'ModelName', rowHeader: 'Name' },
{ checked: true, cellValue: 'value1', rowHeader: 'PL' },
{ checked: true, cellValue: 'value1 / value2 | percentage', rowHeader: '+/-' }
];
$scope.rows = [
{ value1: 100, value2: 5, ModelName: "This is a cell value" },
{ value1: 15, value2: 5, ModelName: "This is a cell value2" },
{ value1: 38, value2: 2, ModelName: "This is a cell value3" }
];
});
</script>
</body>
</html>
There is a typo in the code cause the problem:
<tr ng-repeat="row in rows" border="1">
<td ng-repeat="column in columns"
ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>
You don't have a scope variable called columns, change it to columnsTest.
<tr ng-repeat="row in rows" border="1">
<td ng-repeat="column in columnsTest"
ng-if="column.checked" ng-bind="row[column.cellValue]"></td>
</tr>
Angular javascript array is empty?
I have an array of checkboxes databound to an angular scoped list
I need to check a few checkboxes and send bind them to a second angular scoped array:
My HTML:
<tr ng-repeat="item in pagedItems[currentPage]"
ng-controller="DealerComMaintainCtrl">
<td align="center">
<input type="checkbox" id="{{item.IdArticle}}"
ng-value="item.IdArticle"
ng-checked="selected.indexOf(item.IdArticle) > -1"
ng-click="toggleSelect(item.IdArticle)" />
</td>
<td>
<a href="/Dealercoms/ArticleDownload?FileName={{item.FileName}}&IdArticle={{item.IdArticle}}"
class="btn btn-xs btn-total-red btn-label"><i class="ti ti-download"></i></a>
</td>
<td>{{item.DateArticle | date:'dd/MM/yyyy'}}</td>
<td>{{item.Title}}</td>
<td>{{item.Archive}}</td>
</tr>
And JS in the controller:
$scope.selected = [];
$scope.toggleSelect = function toggleSelect(code) {
var index = $scope.selected.indexOf(code)
if (index == -1) {
$scope.selected.push(code)
} else {
$scope.selected.splice(index, 1)
}
}
$scope.ArchiveDocs = function() {
var selectedoptionz = $scope.selection;
console.log(selectedoptionz);
};
I tried your code and i fixed the problem, by adding the controller on an element above the ng-repeat. The alert is only to check, what is in the selected-array. This is the code, which works fine on my system:
<html>
<head>
</head>
<body ng-app="app">
<table ng-controller="DealerComMaintainCtrl">
<tbody>
<tr ng-repeat="item in pagedItems" >
<td align="center">
<input type="checkbox" id="{{item.IdArticle}}" ng-value="item.IdArticle" ng-checked="selected.indexOf(item.IdArticle) > -1" ng-click="toggleSelect(item.IdArticle)" />
</td>
<td><i class="ti ti-download"></i></td>
<td>{{item.DateArticle | date:'dd/MM/yyyy'}}</td>
<td>{{item.Title}}</td>
<td>{{item.Archive}}</td>
</tr>
</tbody>
</table>
<!-- jQuery -->
<script src="./jquery-2.1.4/jquery.min.js"></script>
<!-- AngularJS -->
<script src="./angular-1.4.5/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("DealerComMaintainCtrl", function($scope){
$scope.pagedItems = [
{IdArticle: 1, Title: "test1", Archive: "archiv1"},
{IdArticle: 2, Title: "test2", Archive: "archiv1"},
{IdArticle: 3, Title: "test3", Archive: "archiv1"},
{IdArticle: 4, Title: "test4", Archive: "archiv1"}
];
$scope.selected = [];
$scope.toggleSelect = function toggleSelect(code) {
var index = $scope.selected.indexOf(code)
if (index == -1) {
$scope.selected.push(code)
}
else {
$scope.selected.splice(index, 1)
}
alert(JSON.stringify($scope.selected));
}
});
</script>
</body>
</html>
Just try it, i hope it solve your problem...