I am trying to pass a php Laravel array of objects with the name $event to my javascript part of the app and I am having issues with looping through the results later on.
Basically what I am doing is this
$events = Event::orderBy('id', 'DESC')->orderBy('resolved', 'desc')->get(); //get events
return View::make('events.index', compact('events')); //pass events to view
And then this is my view
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var myevents = JSON.parse('<?php echo json_encode($events) ?>');
</script>
<div class="col-sm-12" ng-app="myApp2" ng-controller="checkboxController">
<table class="table" id="keywords" cellspacing="0" cellpadding="0">
<tr ng-repeat="event in myevents" >
<td> {{event.category}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>
</table>
</div>
</div>
<script src="http://dsproject.dev:8000/js/jquery-1.11.1.min.js"></script>
<script src="http://dsproject.dev:8000/js/bootstrap.min.js"></script>
<script src="http://dsproject.dev:8000/js/checkboxes.js"></script>
</body>
</html>
This is my controller
var myApp2 = angular.module('myApp2',[]);
myApp2.controller('checkboxController', ['$scope', function($scope) {
//var events = [];
// $scope.some = 'hehehhehehe';
//events.($scope.event);
$scope.myevents = myevents;
console.log($scope.myevents);
/*$scope.toggle = function(id) {
alert(id);
};*/
}]);
The output I get is just {{event.category}} with no value at all. When I do console.log(myevents) or console.log($scope.myevents) in my controller I get the array of objects displayed in the console like this
What am I doing wrong and how would I fix this?
The {{ curlies are being parsed by laravel, you have to change interpolation in angular.
myApp2.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
and then use {[{ and }]} for the angular part of variables.
Related
I have implemented a dataTable on dynamic set of data. There is a javascript variable that contains the following:
var path = "/First/Second/";
This variable is supposed to have two anchors. When I assign this variable dynamically to a cell of a dataTable as follows:
var tab = document.getElementById("sample_table");
var objCells = tab.rows.item(i).cells;
objCells[0].innerHTML = path;
It is shown as plain text within the table cell and is not rendered as HTML by the browser:
/First/Second/
and I want it like this:
/First/Second/
What should be done to render it correctly in the browser?
var path = `/First/Second/`;
var tab = document.getElementById("table1");
var objCells = tab.rows.item(0).cells;
objCells[0].innerHTML = path;
<!DOCTYPE html>
<html>
<body>
<table id='table1' border=1>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
try using JavaScript template literals,
Instead of using single quote using the ` letter
var path = "<a href='http://demo.example.com/first.html'>First</a>/<a href='http://demo.example.com/second.html'>Second</a>/";
document.querySelector('div').innerHTML = path;
<div></div>
You could use the draw method also
<html>
<body>
<script type="text/javascript">
$(document).ready(function () {
var tab = $('#example').DataTable();
var path = "/<a href='http://demo.example.com/first.html'>First</a>/<a href='http://demo.example.com/second.html'>Second</a>/";
tab.cell(0, 0).data(path).draw();
});
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</body>
</body>
</html>
Is it possible in any way to render the table rows of a table with a kendo template?
Here's how it should look but it won't render the rows inside the table since a <table> doesn't allow a <span> or <script> tag inside it
<table class="table-striped">
<span data-template="myTable" data-bind="source: numbers"></span>
<script id="myTable" type="text/x-kendo-template">
<tr>
<td>
<span data-bind="text:number"></span>
</td>
</tr>
</script>
</table>
<script>
var numbers = [{number:1},{number:2},{number:3}]
</script>
You could do it like this:
<table id="output" class="table table-striped"></table>
var tablerows = '';
var template = kendo.template("<tr><td><span>#: number #</span></td></tr>");
var numbers = [{number:1},{number:2},{number:3}];
for (var i=0; i<numbers.length; i++){
tablerows += template(numbers[i]);
}
$("#output").empty().append(tablerows);
DEMO
You could also put the loop inside the template...
I was able to solve it by putting the <script> tag for the template outside the table and binding from the <table> by adding a <tbody> tag inside the table like this:
<table class="table-striped">
<tbody data-template="myTable" data-bind="source: numbers"></tbody>
</table>
<script id="myTable" type="text/x-kendo-template">
<tr>
<td>
<span data-bind="text:number"></span>
</td>
</tr>
</script>
I have the following function which is fetching custom HTML template and passing some values into the scope to generate 'report table'. Because the template is not visible to the user but processed output is directly sent to another function I used $compile function.
It seems that values passed into the $scope are processed correctly but i am not able to get pure HTML result.
I tried to do it by this way:
var templateUrl = $sce.getTrustedResourceUrl('report.html');
$templateRequest(templateUrl).then(function(template) {
$scope.rows = reportData;
var compTest = $compile(template)($scope);
console.log(compTest); //IT RETURNS A LOT OF VALUES BUT NOT HTML OUPUT OF THE PROCESSED TEMPLATE
}, function() {
// An error has occurred
});
Many thanks for any advice.
Results is following:
HTML content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Report</title>
</head>
<body>
<table>
<thead>
<td>
</td>
<td>
Breakfast
</td>
<td>
Lunch
</td>
<td>
Dinner
</td>
<td>
Snack
</td>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>TEST</td>
<td>40</td>
<td>20</td>
<td>30</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
$compile will return a function which will then be executed by scope which in turn will returns a jQlite wrapped DOM object. So you can use outerHTML to get the Template string
or
You can use $interpolate as shown below
Demo
angular.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
function MyController($scope, $compile, $interpolate) {
var template = '<a ng-click="handler()">click handler</a>';
this.tmpl = $compile(template)($scope)[0].outerHTML;
this.tmplInt = $interpolate(template)($scope);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController as MC">
<p><b>using $compile along with outerHTML </b>{{MC.tmpl}}</p>
<p><b>using $interpolate </b>{{MC.tmplInt}}</p>
</div>
</div>
i am new in angular programming,
i want to bind json data that i get from webservice to the html table,
here is my code :
<!DOCTYPE html>
<html>
<head>
<title>LIST OF USER Sample</title>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/module.js"></script>
<script>
function PeopleCtrl($scope, $http) {
$scope.people = [];
$scope.loadPeople = function () {
var httpRequest = $http
({
method: 'GET',
url: 'http://10.17.44.236:9090/MobileBootcamp.svc/getalluseravailability'
})
.success(function (data, status) {
debugger;
$scope.people = data;
});
};
$scope.loadPeople();
}
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="PeopleCtrl" ng-init="loadPeople()">
<table>
<tr>
<th>Id</th>
<th>Availibility</th>
</tr>
<tr ng-repeat="x in people.Datalist[0]">
<td>{{x.UserID}}</td>
<td>{{x.Availability}}</td>
</tr>
<tr>
<td>{{people.DataList[0].UserID}}</td>
<td>{{people.DataList[0].Availability}}</td>
</tr>
<tr>
<td>{{people.DataList[1].UserID}}</td>
<td>{{people.DataList[1].Availability}}</td>
</tr>
</table>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/platformOverrides.js"></script>
<script src="js/index.js"></script>
</body>
</html>
and this is the json from the web service
{"Status":true,"Message":"","Data":null,"DataList":[{"ChangeBy":"Admin","ChangeDate":"\/Date(1439437580137+0700)\/","ChangeNo":2,"CreateBy":"Admin","CreateDate":"\/Date(1439437580137+0700)\/","Availability":true,"LastCheckIn":"\/Date(1439437645420+0700)\/","UserID":"Admin"},{"ChangeBy":"ITK_ABD","ChangeDate":"\/Date(1439398800000+0700)\/","ChangeNo":1,"CreateBy":"ITK_ABD","CreateDate":"\/Date(1439398800000+0700)\/","Availability":false,"LastCheckIn":"\/Date(1439398800000+0700)\/","UserID":"ITK_ABD"}]}
i already try the "ng-repeat" but it didnt work,
the data is like Data --> DataList--> [0] --> userid,availability,etc...
thx in advance
You don't need the [0]. Your ng-repeat is here to get all elements of the list. You just have to give your list, not the index and angular will do the job.
<tr ng-repeat="x in people.DataList">
Do as following -
<tr ng-repeat="x in people.Datalist">
<td>{{x.UserID}}</td>
<td>{{x.Availability}}</td>
</tr>
as you have array of objects in Datalist, you should iterate DataList instead of DataList[0]
No need for the [0]. we don't want to loop through your first object, So just people.DataList will do the job. It will loop through all objects inside that array .
<tr ng-repeat="x in people.DataList">
<td>{{x.UserID}}</td>
<td>{{x.Availability}}</td>
</tr>
You are trying to repeat object here:
<tr ng-repeat="x in people.Datalist[0]">
You can repeat only on Array data type. So you must do this like that:
<tr ng-repeat="x in people.Datalist">
I have to create a table as follows from a nested object.
JSON object :
{
"A":{
"1":"X",
"2":"Y",
"3":"Z"
},
"B":{
"1":"P",
"2":"Q",
"3":"R"
}
}
Desired Table :
A: X|Y|Z
B: P|Q|R
HTML code :
<!DOCTYPE html>
<html data-ng-app="myApp">
<body>
<div ng-controller="GreetingController" >
<div ng-repeat='(key,val) in arr'>{{temp(val)}}
<div ng-repeat='(nestedKey,nestedVal) in aux'>
{{nestedVal}}
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.arr={"A":{"1":"X","2":"Y","3",},"B":{"1":"P","2":"Q"}};
$scope.temp = function(val)
{
console.log(val);
$scope.aux = val;
}
}]);
</script>
I am unable to understand how and where to place the <table>,<tr> and <td> tags to be able to generate the table as describe.
EDIT:
tr is row and td is table cell
<html data-ng-app="myApp">
<body>
<div ng-controller="GreetingController" >
<table>
<tr ng-repeat='(key,val) in arr'>
<td>
{{key}}
</td>
<td ng-repeat='(nestedKey,nestedVal) in val'>
{{nestedVal}}
</td>
</tr>
</table>
</div>
</body>
<div ng-controller="GreetingController" >
<table>
<tr>
<td><div ng-repeat='(key,val) in arr'>{{temp(val)}} </td>
</tr>
<tr><td> <div ng-repeat='(nestedKey,nestedVal) in aux'> </td>
{{nestedVal}}
</div>
</tr>
</div>
</table>
</div>