This is an example of what I want to achieve in the vue component
<div v-for="emotion in emotions" class="cb-row">
<h2>{{ emotion.em_name }}</h2>
</div>
I have created a function in the EmotionsController to return all data from the table
class EmotionsController extends Controller
{
public function getEmotions() {
$emotions = Emotions::all()->get();
return $emotions;
}
}
How do I then get this data into my vue component? It's being loaded into a form
You have to refer laravel documentation first. because it gave you everything what you want.
Here's the link of your question
https://laravel.com/docs/6.x/frontend#writing-vue-components
Related
I am new to using Tealium. I am trying to incorporate Tealium Tag to the last login information. How do I go about it? Below is the code:
HTML Component for last log in date
S-component.html
<div #greeting class="greeting-message">
<ng-container *ngIf="userProfile$ | async as userProfile">
<h1 qa-name="greetingMessage">
Good {{ timeOfDay }},
{{ userProfile.displayName || userProfile.firstName || '' }}
</h1>
<p *ngIf="userProfile.lastLoginDate" qa-name="lastLoggedIn">
You last logged in at
{{
userProfile.lastLoginDate | date: "h:mm:ssaaaaa'm' on MMMM d, y"
}}
</p>
<p *ngIf="!userProfile.lastLoginDate">
Welcome!
</p>
</ng-container>
</div>
Below is the User profile interface
i-user-profile.ts
export interface IUserProfile {
lastLoginDate?: Date
}
Below is the typescript component that contains the time of day and hour a user logs in
S-component.ts
import {
IUserProfile
} from '#shared/interfaces';
import {
TealiumService
} from '#shared/services';
export class SComponent implements OnInit {
private static getTimeOfDay(hour: number): TimeOfDay;
public ngOnInit() {
this.timeOfDay = AccountSummaryComponent.getTimeOfDay(
new Date().getHours()
);
}
constructor(
private readonly _tealiumService: TealiumService,
private readonly _userService: UserService
) {
this.userProfile$ = this._userService.profileChanges();
this.timeOfDay = SComponent.getTimeOfDay(
new Date().getHours()
);
}
}
If you want to pass that data into Tealium then you have a few different options. You will need to ensure that your page already contains the Tealium tag, details on how to add that can be found in Tealium's docs. If you use the serverside products then you can create a visitor attribute that saves the last login date, this can be done in the dashboard without modifying your code.
If you only use the client-side products then you will need to add the userProfile.lastLoginDate variable to the utag_data object on your page. This data will be passed into Tealium when a utag.view() call is made. The relevant portion of your code where you will need to add this is in the script just before your utag.js file is loaded. There is more information about this at the previous link.
I am trying to implement accordion functionality without using bootstrap/angular material accordion. My data is coming dynamically from an api.
I tried doing below but that opens and closes all the panels together. I understand the reason behind it but I don't understand how to approach.
Component.ts
export class AccordionComponent implements OnInit {
isHidden = true;
mFaqs: IFaq[];
constructor(private faqService: FaqService) { }
ngOnInit() {
this.faqService.getFaqs()
.subscribe(faqData => this.mFaqs = faqData );
}
}
component.html
<div class="custom-header" hideToggle="true" (click)="isHidden = !isHidden" *ngFor="let faq of mFaqs?.faqs">
<section>
<section>
Q: {{ faq.question }}
</section>
<p [hidden]="isHidden">
{{ faq.answer }}
</p>
</section>
</div>
It should only close/open the clicked one.
You need to pass unique id for that.
Might be it'll help you.
Angular on click event for multiple items
please go through it.
I am learning AngularJS at the moment and I am a little confused about the MVC separation of code throughout the DOM/file structure when using AngularJS.
I learn best when I work on a project. Right now I am working on a simple counter that adds a whole number when a button is pushed. I only have one way working and I am thinking of a better way to do this.
Right now I have this working in the code I am working on from AngularJS documentation itself.
I am probably crazy thinking that this cannot be the best way to do this. From my understanding ng-click is a directive that triggers a specific scope of code within the controller.
Why is Increment code inline within the DOM? As a MVC, should the code be organized to not be all over the place, such as in the main controller.js? I have tried to put the increment += function in a counter object, but could not get it to work, see jsFiddle.
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
I get that Apps view information based on expressions, filters, and directives. Directives bind to HTML to change behavior of the HTML. Clicks (with Directive selectors) controllers triggers AngularJS to run functions to update data without the entire page being reloaded.
So the Model is the whole setup.
The View is the expressions, filters, and directives.
Controller is the JS file of code that has objects and functions needed for the HTML Directives.
The example of the documentation has inline controller in the directive ng-click within the button tag…
Does anyone have any advice? Thank you.:)
There is a correct way of doing that in angular via a controller:
http://jsfiddle.net/zhxztysy/1/
Your fiddle was like this
<div ng-controller="MyCtrl">
<button ng-click="char">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.count = Function (char) {
$scope.count += char;
};}
Changed to this
<div ng-controller="MyCtrl">
<button ng-click="charge(5)">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.charge = function (char) {
$scope.count += char;
};
}
Can also extended like this
<div ng-controller="MyCtrl">
<button ng-click="charge()">Charged</button>
<span>Total: {{ count }}</span>
</div>
function MyCtrl($scope) {
$scope.count = 0;
$scope.chargingCount = 5;
$scope.charge = function () {
$scope.count += $scope.chargingCount;
};
}
I edited your jsfiddle to work. You have made a syntax error (bound $scope.count to a function and tried to add numbers to it later on)
I'm trying to pass a variable value from controller to my main.php layout file but i keep getting error Undefined variable: contentWrapperBackground. below is my code
controller
public function actionList()
{
$contentWrapperBackground = "ff4400;";
$contentBackground = "3c8dbc;";
return $this->render('list', [
'contentWrapperBackground' =>$contentWrapperBackground,
'contentBackground' => $contentBackground,
]);
}
and in my layout file like this
<div class="content-wrapper" style="background-color:#<?=$contentWrapperBackground?>">
<!-- Content Header (Page header) -->
<!-- Main content -->
<section class="content" style="background-color:#<?=$contentBackground?>">
but i always get error Undefined variable: contentWrapperBackground. I'm trying to change the background color of for different pages. any help on this, and am also open to another idea on how to make this work thanks
don't use session for this!
Simple solution:
class Controller extends \yii\web\Controller
{
$public $contentWrapperBackground;
$public $contentBackground;
}
class YourController extends Controller
{
public function actionList()
{
$this->contentWrapperBackground = "ff4400;";
$this->contentBackground = "3c8dbc;";
return $this->render('list', []);
}
}
in your main layout
<div class="content-wrapper" style="background-color:#<?=Yii::$app->controller->contentWrapperBackground?>">
or another option
<div class="content-wrapper" style="background-color:#<?=$this->context->contentWrapperBackground?>">
you can set param in controller
Yii::$app->view->params['paramName'] = 'data';
get data in layout
$this->params['paramName'];
Is there a way to pass a value from a Django view to an AngularJS inserted template?
In my view.py I have the code:
count_users = Profile.objects.filter(user_id__gte = 0).count()
context_dict = {'users': count_users}
return render_to_response('dashboard.html', context_dict)
In dashboard.html I am able to insert the user count into the html as follows:
{{ users }}
This works fine but dashboard.html uses AngularJS to insert some more html as follows:
<div ui-view class="fade-in-up">
</div>
Mt problem that the html file inserted by AngularJS does not respond to the:
{{ users }}
Is there a way to pass the value of users through to the AngularJS inserted HTML?
using ng-init you can attach your value into the $scope
<div ui-view class="fade-in-up" ng-init="User='{{user}}' " >
</div>
In your javascript do:
mainModule
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
});
This way, if you want to bind an angular variable in the html, you use:
{$ variable $}
If you want to add a Django variable, you use:
{{ variable }}
And your code may work if you leave it as it is, and just add this configuration to the angular module.