I load data via Angular ajax. How can I pass returned results to laravel #include partial?
Angular:
$scope.findItem = function(itemId) {
$scope.spinner = true;
$http.get('item/' + itemId).success(function(results) {
$scope.spinner = false;
$scope.results = results[0];
});
};
html:
<div ng-init="findItem(185)">
<span ng-show="spinner" class="spinner"></span>
<div ng-hide="results == undefined">
#include('partials.item', {{ results }}) // <- I want to pass 'results' here
</div>
</div>
You can't really do that. But you can just include the results variable as javascript in your partials.item view. So your HTML would look like this:
<div ng-init="findItem(185)">
<span ng-show="spinner" class="spinner"></span>
<div ng-hide="results == undefined">
#include('partials.item')
</div>
</div>
And your partials.item view would have angular variables instead of laravel variables:
#{{results}}
Instead of
{{$results}}
Make sense?
Related
How can I get objects stored in localstorage
Here is my html :
<div class="card" ng-repeat="sign in monobjet_json.List">
<ion-item>
<div class="video-container">
<img ng-src="{{sign.src}}" width="200" height="150"/>
</div>
<div class="item item-icon-left assertive">
<i class="icon ion-android-document"></i>
{{sign.texte}}
</div>
</ion-item>
</div>
Access the data from the local storage on the js code not form the html directly.
First check if the data is already in the storage so you can access it directly without making a backend call, if it is not there then make a call to the backend, get the data and store it in local storage.
app.controller('LoginCtrl', function($scope, $http){
var item = localStorage.getItem("object")
if(item) {
$scope.monobjet_json = items;
}
else {
$http.get('signs.json').then(function(res) {
$scope.signs = res.data;
$scope.monobjet_json = JSON.stringify(res.data);
localStorage.setItem("object", $scope.monobjet_json);
});
}
My suggestion here would be to create an angular service which handles the json payload from source and returns a js object representation of the json data. This would potentially contain your array of values as a property.
Service:
return $http.get({'... your endpoint here'})
Controller:
var ctrl = this;
service.getJson()
.then(function(res){
ctrl.list = res.data
}
Now in html you you just bind your ng-repeat to get your image src. Note: $ctrl indicates use of angular component else Replace $ctrl with your controller as var.
<div class="card" ng-repeat="sign in $ctrl.list">
<ion-item>
<div class="video-container">
<img ng-src="{{sign.src}}" width="200" height="150"/>
</div>
<div class="item item-icon-left assertive">
<i class="icon ion-android-document"></i>
{{sign.text}}
</div>
</ion-item>
</div>
Try this:
$http.get('signs.json').then(function(res){
$scope.signs = res.data;
localStorage.remove('object');
if(localStorage.getItem('object') == null){
var monobjet_json = JSON.stringify(res.data.json());
localStorage.setItem("object",monobjet_json);
}
});
if( localStorage.getItem('object') != null){
var monobjet_json = JSON.parse(localStorage.getItem("object"));
var List = monobjet_json.List;// TODO: get some of data from json object
}
});
I have list of checkbox with button submit , and I when i click on submit, I have to get all checked values in other view table. I find a lot of answers, but they all propose to get values in the same view,but I need to get values in other view(ajoutFactAdmin2), how can I do that please. this is the code:
ajoutFactAdmin2.html
<div class="row" ng-repeat="x in namesF3">
<div class="col"><input type="checkbox" name="" ng-modal="x.selected" ng-checked="exist(x)" ng-click="toggleSelection(x)" ng-true-value="'{{x.CodeEnvoiColis}}'" ng-false-value="''" id="'{{x.CodeEnvoiColis}}'"></div>
<div class="col" >{{x.CodeEnvoiColis}}</div>
<div class="col" width="20%">{{x.StatutColis}} </div>
<div class="col" width="20%">{{x.VilleDestColis}}</div>
</div>
<div class="selectedcontent">
<h3> Selected Names </h3>
<p ng-repeat = "selectedName in selected"> {{selectedName.CodeEnvoiColis}} </p>
</div>
<a class="button button-info" ng-click="toggleSelection(x)" href="#/ajoutFactAdmin2" style="background-color:#1627C0;float: right;">Ajouter</a>
app.js :
$scope.selected = [];
$scope.namesF3 = [];
$scope.exist = function(item){
return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item){
var x = [];
var idx = $scope.selected.indexOf(item);
if(idx > -1){
$scope.selected.splice(idx, 1);
}
else{
$scope.selected.push(item);
}
}
There are mainly 3 ways to achieve this
local storage/session storage:
To set value in local storage:
localStorage.setItem("key","value");
To get value:
localStorage.getItem("key");
Factory/Service
angular.module('app').factory('tempStorageService',function(){
var data={};
return{
setData:function(tempData){
data=tempData;
},
getData:function(){
return data;
}
}
})
$rootScope
$rootScope.tempData = YourData;
I would prefer to go with localstorage option because if you refresh the browser the data that is stored using factory or with $rootscope vanishes.
I am displaying data from the database (using Web API) on the page:
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{Item.CollectionID}}</div>
</div>
</div>
the above works fine, but when I try getting actual Collection Name, I get an issue:
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{GetCollectionName(Item.CollectionID)}}</div>
</div>
</div>
here is my controller function for getting Collection Name:
$scope.GetCollectionName = function (CollId) {
$http.get('http://Server/App/api/GetCollName/' + CollId).
then(function (result) {
$scope.CollectionName = result.data;
return $scope.CollectionName;
});
}
is there a better way to do this besides modifying my underlying query?
The basic idea here is to use ng-init to initialize a local CollectionName variable for each Item in your ng-repeat. You can then use that local variable to output CollectionName[Item.CollectionID].
Here's a working demo
<div ng-repeat="Item in Items" ng-init="GetCollectionName(Item.CollectionID)">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{CollectionName[Item.CollectionID]}}</div>
</div>
</div>
$scope.CollectionName = [];
$scope.GetCollectionName = function (CollId) {
$http.get('http://Server/App/api/GetCollName/' + CollId)
.then(function (result) {
$scope.CollectionName[CollId] = result.data;
});
}
It is bad practice to call the function inside loop. And you are using expression tag in angularjs which creates watcher. Always make sure all the necessary records to display is already in the associated scope variable.
$scope.GetCollectionName = function (CollId) {
if(!$scope.someDataCheck[CollId] && !$scope.someData[CollId]){
$scope.someDataCheck[CollId] = true;
$http.get('http://Server/App/api/GetCollName/' + CollId).
then(function (result) {
$scope.someDataCheck[CollId] = false;
$scope.someData[CollId].data = result.data;
});
}
return $scope.someData[CollId];
}
I am developing phonegap app with ionic framework,in this app i have 13 controller and 13 views files in all views i need to call same function formateDateWithExtraValue(user.date), to call this function i have to declare this function in all 13 controllers like bellow
$scope.formateDateWithExtraValue = function(Udate){
"my code are here"
return result;
}
is there a way so we could write this function globally, so it could be accessible across all views.
like in PropertyView.html
{{ formateDateWithExtraValue(user.date) }}
The most appropriate angular way to accomplishing this type of formatting in a view is to use a filter. The end result will permit use of your formatting function across all views.
I have provided a working example here: http://codepen.io/krcourville/pen/BzRxvr?editors=1010
Code
angular
.module("app", [])
.controller("Controller1", function() {
this.originalValue = " I have too many spaces !!";
})
.controller("Controller2", function($filter) {
this.originalValue= "I also have too many spaces!!"
var removespaces = $filter("removespaces");
this.extra = removespaces("Something extra you can do");
})
.filter("removespaces", function() {
return function(value) {
if (typeof value === "string") {
return value
.split(" ")
.filter(function(f) {
return f !== "";
})
.join(" ");
} else {
return value;
}
};
});
View
<div ng-app="app">
<p>
Demonstrates using of filter across multiple controllers.
</p>
<div ng-controller="Controller1 as $ctrl">
<h2>Controller1</h2>
<p>
Original Value:<pre>{{ $ctrl.originalValue }}</pre>
</p>
<p>
filtered: <pre>{{ $ctrl.modifiedInCtrl | removespaces }}</pre>
</p>
</div>
<div ng-controller="Controller2 as $ctrl">
<h2>Controller2</h2>
<p>
Original Value:<pre>{{ $ctrl.originalValue }}</pre>
</p>
<p>
filtered: <pre>{{ $ctrl.originalValue | removespaces }}</pre>
</p>
<p>
extra (using the filter in a controller): <pre>{{ $ctrl.extra }}</pre>
</p>
</div>
</div>
More information here: https://docs.angularjs.org/guide/filter
I would like to download a response on a server in JSON which contains the attribute to populate my select list. I would like to do it with AngularJS and I'm using Angular 2.
Nothing appears, I think the problem is on my attribute ng-repeat :
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in filters track by $index">
{{n}}
</div>
</div>
</div>
</div>
This is my controller :
angular.module('d3DemoApp',[])
.controller('myCtrl',function($scope) {
$scope.notes = userService.getData();
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "releaseFilter");
myDiv.appendChild(selectList);
selectList.setAttribute("class", "form-control");
selectList.setAttribute("onclick", "myFunction()");
//Create and append the options
for (var i = 0; i < $scope.notes.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = $scope.notes[i];
selectList.appendChild(option);
}
});
This is the service which should download the response :
app.service("userService",["$http",
function($http) {
_this = this;
this.getData = function() {
},
$http.get('./dataOnServer.json'). // This adress is normally an HTTP adress which send me the JSON
success(function(data) {
return data;
});
}
]);
This is an online example of the problem with Plunker : https://plnkr.co/edit/du7sU8bhg2G3X7HckbV9?p=preview
I hope you will can help me, thanks a lot !
I would point out that you are repeating filters when you are not defining such variable in your scope or anywhere? You should probably repeat $scope.notes so it would go like this:
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in notes track by $index">
{{n}}
</div>
</div>
</div>
</div>
EDIT:
And you can do a select like this:
<select>
<option ng-repeat="n in notes">{{n.value}}</option>
</select>
And your JSON is invalid. It should be like this for the repeat:
[{value: "value 1"},{value: "value 2"},{value: "value 3"}]