I am having some problem with angularJs , while trying to do server side pagination.
Here is the HTML:
<div class="body-container detail-box">
<div class="table">
<div ui-grid="gridOptions" ui-grid-pagination class=""></div>
</div>
</div>
JS File:
module.exports = managerShowEditController;
},{}],12:[function(require,module,exports){
var managerIndexController = function($scope, $http, $resource, $stateParams, uiGridConstants, gridPaginSorting, config) {
// some code
}
The error is :
I am unable to use 'uiGridConstants, gridPaginSorting and config'
any idea whats going wrong ?
Add the package name to your app.js file. For Example : 'ui.grid'
Related
I am creating a web app having dashboard using laravel and vue.
When I pass data from controller to vue file data is received properly but when I set it to vue variable the value is not set in the variable. All data is received and its displayed in the console but when I set it to the vue variable, the variable doesn't update its value.
This is my Controller class:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
//
public function index()
{
$users=User::all();
return response()->json($users);
}
}
This is myTeam.vue for receiving and displaying the data:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<h1>
This request list
Hello,{{this.items}}
</h1>
<ul class="list-group">
<li class="list-group-item" v-for="t in items">{{items}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
//items: []
items:[],
}
},
created() {
var self=this;
axios.get('/allusers').then((response) => self.items=response.data) .catch((error)=>console.log(error));
axios.get('/allusers') .then(response => console.log(response.data));
console.log('Component mounted.'+this.items)
},
}
</script>
Now when I run it the console prints the array properly means data is received but when I set it to items variable the data is not set.
My Output is this:
This is the output image file
Please check it and thanks in advance ...
This is never print items array because it's execute before the ajax response is filled.
console.log('Component mounted.'+this.items)
That's why your console is always blank. You can search about blocking and non blocking programming.
your code have small bug. Update your code and try this:
<h1>
This request list
Hello,{{items}}
</h1>
<ul class="list-group">
<li class="list-group-item" v-for="t in items">{{t}}</li>
</ul>
...
<script>
export default {
data(){
return {
items:[],
}
},
mounted: function () {
this.getList();
}
methods: {
let _this = this;
axios.get('/allusers')
.then((response) => _this.items = response.data)
.catch((error)=>console.log(error));
},
}
</script>
This can help you. Good luck.
Currently, I have my directives being switched out in this fashion.
In my directive:
(function(){
'use strict';
var controller = ['$scope', function ($scope) {
}];
angular
.module('moduleName', ['myDependency'])
.directive('dirName', function($compile, $window){
return{
restrict: 'E',
replace: true,
require: [ '^?myDependency'],
scope: false,
controller: controller ,
template:
`<div ng-switch="templateConfig.type">
<div ng-switch-when='con1'>
<p> Config 1 </p>
</div>
<div ng-switch-when='con2'>
<p> Config 2 </p>
</div>
<div ng-switch-when='con3'>
<p> Config 3 </p>
</div>
</div>`
And in the PHP file, I have the following:
function pageController($scope, $http, $filter, $cleo, $timeout, $compile) {
$scope.templateConfig= {type: 'Con2'};
}
<div class="row-fluid">
<div class="span1" id="title" > name </div>
<div class="span11">
<dirName>
</dirName>
<br/>
</div>
</div>
<div class="row-fluid">
<div class="span1" id="title" > name2 </div>
<div class="span11">
<dirName>
</dirName>
<br/>
</div>
</div>
So how it works is that when I can switch between templates using {type: 'Con2'}. However, this will affect both <dirName></dirName> tags. What I want is for me to have the ability to define them independently of each other.
What I want would be something like <dirName templateConfig=Con1></dirName>. I not entirely sure how to achieve this though but I don't think it should be too difficult to make the switch.
Also, I did leave out a lot of code from the PHP file and changed the original names in the code but none of that should be relevant.
Use the function form of the template property:
app.directive('dirName', function($compile, $window){
return{
restrict: 'E',
template: function (elem, attrs) {
switch(attrs.templateConfig) {
case 'con1':
return `<p> Config 1 </p>`;
case 'con2':
return `<p> Config 2 </p>`;
case 'con3':
return `<p> Config 3 </p>`;
};
}
};
})
Example usage:
<dir-name template-config="con2">
</dir-name>
Update
From the Docs:
template
Value may be:
A function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value.
— AngularJS Comprehensive Directive API Reference - template
I'm using framework ionic 2 and I need send parameters from my tabs to other page , that page is not on my tab...
I know the method " this.navCtrl.push(view,{parameters}) " but I only need send the parameters , don't want open other page , Only parameters. please help me.
In my code I need send parameter "rut".
tabs.html:
<ion-menu [content]="content" >
<ion-header>
<ion-toolbar>
<img class="avatar" src="assets/img/i2.png">
<div class="name-user">{{nombre}} {{apellido}}</div>
<div class="rut-user">{{rut}}</div>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list>
<div class="items-menu">
<div class="item-menu" (click)="scan()">
<ion-icon name="md-qr-scanner"></ion-icon>
<div class="title">Escanear Producto</div>
</div>
<div class="item-menu" (click)="modificarPerfil()">
<ion-icon name="md-person"></ion-icon>
<div class="title">Perfil</div>
</div>
<div class="item-menu">
<ion-icon name="md-settings"></ion-icon>
<div class="title">Opciones</div>
</div>
<div class="item-menu">
<ion-icon name="md-information-circle"></ion-icon>
<div class="title">Acerca De</div>
</div>
<div class="item-menu" (click)="cerrarsesion()" >
<ion-icon name="md-log-out"></ion-icon>
<div class="title">Cerrar Sesion</div>
</div>
</div>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="true" ></ion-nav>
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Carro" tabBadge="{{num}}" tabIcon="cart" tabBadgeStyle="danger" ></ion-tab>
<ion-tab tabTitle="Perfil" tabIcon="md-person" (ionSelect)="modificarPerfil()"></ion-tab>
</ion-tabs>
I am assuming you have 3 pages: tabsAll, tab1Root, tab2Root where tabsAll is the overall and whose code is shown.
You need to send parameters from the tabs to other page. I am assuming the other page is the other tabs? You can make use of rootParams to pass parameters from tabs to other tabs.
tabsAll html
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" [rootParams]="{rutValue: rut}"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="{rutValue: rut}" ></ion-tab>
</ion-tabs>
tab1Root js
constructor(..., private navParams : NavParams){
var rut = navParams.get("rutValue");
}
More documentation about rootParams here: https://ionicframework.com/docs/api/components/tabs/Tab/
Let me know if this is what you wanted.
If you do not wish to go to the page you send your data to a shared service by creating a provider and get the data wherever you want
Create a provider using the cli command,
ionic g provider providerName
Store your value in your provider.ts like this,
import { Injectable } from '#angular/core';
#Injectable()
export class Provider {
public addedItems:any;
constructor() {
}
addedItems(data) {
return this.addedItems=data;
}
}
and import this provider in your component.ts to retrieve the added value. This way you can send data to other pages without opening any pages. Hope that helps
I'm developing a project with Anjular js and Codeigniter 3. I have faced some issues with routing in angular js. I have a view page with a list of details of users and inside that list there is a tag with ng-click="myName()". I have declared this function inside my js file and this function works fine.
<div class="container" ng-controller="ListController">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change</p>
<div class="row">
<div class="col-sm-6 col-md-4 wow zoomIn" data-wow-delay="0.5s" ng-repeat="items in artists">
<div class="thumbnail">
<img ng-src="{{settings.base_url}}/application/assets/images/profile/{{items.shortname}}.jpg" alt="...">
<div class="caption">
<h3>{{items.name}}</h3>
<p>{{items.bio}}</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
</div>
</div>
Inside this function "myName()" I have written $http.post for getting a function inside the controller(Codeiginter controller). I'm using auth.php as controller and functionOne() is the function to retrive.
var base_url_abs = window.location.origin;
var base_url = base_url_abs+'/AngularExPack/Angular_Bootstrap_CI_1/';
var base_url_controller = base_url_abs+'/AngularExPack/Angular_Bootstrap_CI_1/index.php/';
myApp.controller('ListController', ['$scope', '$http', 'settings', function($scope, $http) {
$http.get('application/datas/data.json').success(function (data){
$scope.artists = data;
});
$scope.myName = function() {
alert("hai1");
/*
$http.post(base_url_controller+'auth/functionOne/').success(function (response){
$scope.data = response
console.log(response);
//alert($scope.data);
});*/
/**/ $http({
method : 'POST',
url : base_url_controller+'auth/functionOne/',
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
$scope.data = response
console.log($scope.data);
alert($scope.data);
});
}
}]);
When i run this, an error is occured and showing like this inside the console
But i'm getting the correct result when i click on this link and also if i give base_url path inside the href inside a tag.
Button Button
But what i need is inside this myName function i have to access the controller function functionOne() using $http using angular js. Is that possible.?
If anyone knows please help me to find out the solution in ng-click. Correct me if i written wrong code.
Thank you.
you should use
$http({
method : 'GET',
url : base_url_controller+'auth/functionOne/',
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
$scope.data = data
console.log($scope.data);
alert($scope.data);
});
hi so im making a session via ajax when a certain button is clicked here is the code
function cModal(id)
{
alert(id);
$.ajax({
method: 'post',
url: 'http://localhost/dummy/app/putSession.php',
data: {
'dID': id
},
success: function()
{
alert(id);
}
});
}
it is successfull because it alerts the id inside the success:function()
in my putSession.php file here is how i did it
<?php
session_start();
$tId = $_POST['dID'];
$_SESSION["sID"] = $tId;
exit();
?>
but the thing is i can't access it inside my blade file im calling it like this
<div class="modal-content">
<div class="row rowMarg">
<?php session_start(); ?>
#if(Session::has('sID'))
{{ Session::forget('sID') }}
<h6>Information.</h6>
#else
<h6>File details not found.</h6>
#endif
</div>
</div>
it just goes to the file details not found
any idea what im doing wrong? thanks in advance!
use laravel session like
$request->session()->put('user', 'value');
$request->session()->get('user', 'value');
$request->session()->push('user.teams', 'developers');
for more https://laravel.com/docs/4.2/session