I'm new to AngularJs and i'm trying to make web with angular.js and PHP.I'm having some trouble on displaying data from a Json .
My controller
$scope.careprovider = function() {
$http.post('php/homefunctions.php', {
'act': 'careprovider'
}).success(function(data, status, headers, config) {
if (data.sessionError == 1) {
$location.path("/Login");
}else {
alert(data.careproviders);
$scope.careprovider = data.careproviders;
$scope.specializations = data.specializations;
}
}).error(function(data, status) {
$scope.errors.push(status);
});
}
I have JSON Array object as shown below
{"careproviders":
{"Anaesthesiologists":
[{"id":"37","addedBy":"5463e2dc0f","doctorName":"test","email":"sukalavan#consult-ic.com","hasUpdation":"NO"},
{"id":"38","addedBy":"62f5d33584","doctorName":"test1","email":"sukalavan#consult-ic.com","hasUpdation":"NO"}],
"Cardiologist":
{"id":"38","addedBy":"62f5d33584","doctorName":"test2","email":"sukalavan#consult-ic.com","hasUpdation":"NO"}]}
I want to get the keys and values separately using ng-repeat in angular.js.Here is my html
<div ng-repeat="f in careprovider">
<div class="cus-row-head">want show here the key</div>
<div class="row cus_row clearfix cus-sep-row posrel">
<div class="col-xs-12 col-md-12">
<div class="col-xs-6 col-lg-8 cus-col-mob-4">
<span class="cus-md-font">want to show here the doctor name</span>
<span class="cus-sm-font cus-inline">
<span class="glyphicon glyphicon-envelope"></span> email </span>
</div>
</div>
<a class="icons_sm icons-sm-edit"></a>
</div>
</div>
try this
{{f.doctorName}}
instead of "doctorName"
Check my plunker
Check out this jsfiddle I put together which has the type of structure you want.
If you want to loop through the keys of an object, your ng-repat should look like this:
<div ng-repeat="key in keys(object)"></div>
Where keys is defined in your controller as:
$scope.keys = function(obj){return obj? Object.keys(obj) : [];}
(BTW, your json has a missing '[' character in it.)
Try doing this:
ng-repeat="(key, value) in data"
Then you can access {{key}} and {{value}}
The method is mentioned here: https://docs.angularjs.org/api/ng/directive/ngRepeat
Related
Sorry for the next question, Im really new on VUE.
I have a button on my blade, when I do it click I want to retrieve the info of the customer depend of the ID that get on my controller, I get the ID #3 and I click on CUSTOMER INFO Button, I want to see the info of this customer from the database
This is my function on my Controller CustomersController.php
public function showcustomers($idcustomer)
{
$Customers = Customers::find($idcustomer);
return view('showcustomer',
['Customers' => $Customers]);
}
And this is my button on Blade showcustomer.blade.php :
<div id="cita">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6">
<button v-on:click="showinfo = !showinfo" type="button" class="w3-btn w3-blue" style="width:100%">CUSTOMER INFO</button>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="container align-content-between">
<div class="row text-center">
<div class="col-md-12 col-xl-12">
<information v-if="!showinfo"></information>
</div>
</div>
</div>
</div>
My app.js
Vue.component('information', require('./components/information.vue').default);
var app = new Vue({
el: '#cita',
data: {
showinfo: true,
}
});
And finally my information.vue
<template>
<div id="information">
<h4>Information {{ Customers.name }}</h4>
</div>
</template>
<script>
export default {
name: "information"
}
</script>
<style scoped>
</style>
Standard way of doing that is you will be implementing an ajax request where your front-end or Vue will fetch the necessary information from back-end via ajax request.
Another way of achieving that is you will be using properties or attributes in VUE
from your information.vue add a props maybe customerName or orderId or both
<template>
<div id="information">
<h4>Information {{ customerName }}</h4>
<h4>ID {{ orderID }}</h4>
</div>
</template>
<script>
export default {
props:["customerName","orderID"],
name: "information"
}
</script>
<style scoped>
</style>
in you showcustomer.blade.php you can pass the data from php to your vue by adding attributes based on the property name declared on you vue template
<information customer-name="John Mahu" order-id="0099812-ABC" v-if="!showinfo"></information>
or populate from your PHP variable
<information customer-name="{{ $Customers->customer_name }}" order-id="{$Customers->some_order_id}" v-if="!showinfo"></information>
Read more about vue props
https://v2.vuejs.org/v2/guide/components-props.html
I have a paging setup, which can be shown as such:
<div class="page__A4">
</div>
<div class="page__A4">
</div>
<div class="page__A4">
</div>
Data is then passed from my SQL database using PHP, through a for loop, e.g:
#foreach($data as $value)
<div class="element">
{{$value}}
</div>
#endforeach
which would leave the final markup:
<div class="page__A4">
#foreach($data as $value)
<div class="element">
{{$value}}
</div>
#endforeach
</div>
<div class="page__A4">
</div>
<div class="page__A4">
</div>
My $value is dynamic in height, and when the amount of $value's exceeds the first page__A4 element in height, I want it to proceed to the next page.
The real issue relies in that I am unable to use Javascript. I need to print these pages to PDF, which is done by combining a laravel view with a SASS styling file - meaning javascript wont be loaded in my final printed product.
Is there a way to achieve this, using a combination of laravel/php/SASS?
You have to class="A_4" dynamic too if you want to use it in javascript.
foreach($values as $ value){
<div class="'example'.$value.">
</div>
}
I am newer to Angular and seem to be having difficulty finding out why I'm getting blank fields. I'm using the 1.7.7 version of angular-min and angular-route.
The data is being pulled from a table called "news" and I am only needing the ID and ARTICLE columns. The ARTICLE column is stored from a CKEditor textarea.
My route looks like:
var app = angular.module("HabbfinityApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl : "home.php"
}).when("/home", {
redirectTo : "/"
}).when("/news", {
templateUrl : "news.php"
}).when("/newsinfo/:id", {
templateUrl : "newsinfo.php",
controller: "newsList"
}).otherwise({
redirectTo : "/"
});
}]);
app.controller("newsList", function($scope, $http, $routeParams){
var id = $routeParams.id;
$http.get("newsitem.php?id=" + id)
.then(function(resp){
$scope.item = resp;
});
});
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
My newsitem.php looks like:
<?php
require('config2.php');
$id = $_GET["id"];
$newsQuery = $dbh->prepare("SELECT id, article FROM news WHERE id=:id LIMIT 1");
$newsQuery->execute(array(":id"=>$id));
$newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
echo json_encode($newsQueryData);
?>
My newsinfo.php looks like:
<div class="row">
<div class="col-md-12">
<div class="panel-default panel-custom">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-lg fa-newspaper-o" aria-hidden="true"></i> News</h3>
</div>
<div class="panel-body">
<div ng-controller="newsList">
<div ng-repeat="x in item">
<img src="assets/images/news.png" alt="News" class="img-center img-responsive">
<br>
Tweet
<br>
<br>
<p ng-bind-html="x.article | unsafe"></p>
</div>
</div>
</div>
</div>
</div>
</div>
ISSUE
After the first image, twitter button and actual article, everything gets repeated another five times, so I end up with six images and six tweet buttons where the ID of the repeated five is blank.
Here's a var_dump using htmlentities so you can see exactly what those columns are pulling in.
string(899) "{"id":"610","article":"<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">All of us at habbfinity would like wish our<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">Builder<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"color:#2980b9\"><span style=\"font-size:48px\">Sarah<\/span><\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><img alt=\"Image result for happy birthday gif\" src=\"http:\/\/bestanimations.com\/Holidays\/Birthday\/flowers\/happy-birthday-vintage-roses-gold-gif.gif\" \/><\/p>\r\n"}"
I've tried doing:
<div ng-repeat="x in item | limitTo: 1">
That doesn't work.
TEMP FIX
After reading through some of the posts on here, I managed a temporary fix.
I added the following to the newsList controller:
$scope.id = $routeParams.id;
I then changed newsinfo.php by moving the image and twitter button outside of ng-repeat and changed {{x.id}} in the twitter link to {{id}}.
QUESTION
How can I fix this to allow everything to be within the ng-repeat without having to use the temporary fix?
Or is what was done for the temporary fix the better way of doing it anyway?
EDITED ANSWER / QUESTION
Thanks to the suggestion below, I was able to get this resolved.
However, I have one more question.
Is there a way to do this on one page? For example, news.php is just a list of news posts and newsinfo.php is the single news post. Am I able to do something to get it all on news.php and keep the route to only /news, which would show the list if the route isn't news/# or show the specific item if the route is news/#?
The console shows that the posts were retrieved successfully, the backend works fine without the angular compatibility.
and its supposed to retrieve post data.
angular.js:12701 XHR finished loading: GET
"http://127.0.0.1:8000/auth/posts".
however it shows 5 empty divs like the following
main.js
$http.get('/auth/posts').then(function(data){
$scope.myposts = data;
});
PostController
public function getPosts()
{
$posts = Post::all();
return json_encode($posts);
}
Route
Route::get('auth/posts', 'HomeController#getPosts');
the html file
<div id="mypost" class="col-md-8 panel-default" ng-repeat="post in myposts">
<div id="eli-style-heading" class="panel-heading"><% post.title %></div>
<div class="panel-body panel">
<figure>
<p> <% post.body %></p>
</figure>
</div>
</div>
You need to access the data property from the response, I think you need,
$http.get('/auth/posts').then(function(data){
$scope.myposts = data.data;
});
I'm returning a notice from an ajax call with
$app = JFactory::getApplication();
$app->enqueueMessage('Joomla notice', 'info');
On the front end this results in the following (note empty heading):
<div id="system-message-container">
<div id="system-message" class="alert alert-info">
<h4 class="alert-heading"></h4>
<div>
<p>Joomla notice </p>
</div>
</div>
</div>
However I want to display the notice with a heading and a dismiss button too like it does in the backend, i.e.
<div id="system-message-container">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="alert alert-info">
<h4 class="alert-heading">Info</h4>
<p>Joomla notice</p>
</div>
</div>
Is there a Joomla way to do this or do I have to come up with a work around?
The message is rendered in media/system/js/core.js by the Joomla.renderMessages function.
You may override it in your template with
jQuery(function() {
Joomla.renderMessages = function(messages) {
// copy / adapt the original function here.
}
});
Also, non-ajax messages can be customized by the html/message.php template override.
After you en-queued your message I suggest to send the message like
echo new JResponseJson($data);
JFactory::getApplication()->close();
Then you can on the client side work on the messages array like #Riccardo's solution. For example mine ajax success function looks like
success: function(responseText){
var json = jQuery.parseJSON(responseText);
Joomla.renderMessages(json.messages);
....
You can find the code here https://github.com/Digital-Peak/DPAttachments/blob/master/com_dpattachments/admin/libraries/dpattachments/core.php#L162