I fill my angularjs cookie with some objects like
$scope.benchmarks = function(product) {
$cookieStore.put("benchmark_prods", product);
$scope.benchmarks = $cookieStore.get("benchmark_prods");
console.log(benchmarks); //is getting filled
};
than I would like to access in view if cookies contains elements but I don't know how
I tried
<div ng-repeat="product in products">
//here the click event which is stroing product in cookie an simultanly shuld update cookie loop
<a data-placement="bottom" ng-click='benchmarks(product)' title="" rel="tooltip" class="button-icon jarviswidget-delete-btn" href="javascript:void(0);" data-original-title="Delete"><i class="fa fa-bookmark"></i></a>
</div>
<div ng-controller="MainCtrl">
<fieldset>
<section>
<div class="panel-heading">
<legend class="params">
<h4 class="panel-title">
Benchmarks
</h4>
</legend>
</div>
<div ng-repeat="benchmark_prod in benchmarks">
{{benchmark_prod}}
</div>
<div class="inline-group" id="conf_display">
</div>
</div>
but doesn’t work
$scope.benchmarks = function(product)
{
$cookieStore.put("benchmark_prods", product);
if($cookieStore.get("benchmark_prods")!=null && $cookieStore.get("benchmark_prods")!="")
{
$scope.benchmarkspro=$cookieStore.get("benchmark_prods")
}
console.log(benchmarkspro); //is getting filled
};
change benchmarks to benchmarkspro in html.
Related
Problem: I have a button in a form that opens a modal window(a component). In this modal window the user selects the files he wishes to upload. After the clicks in button submit in the modal window. It closes the modal and stays in the previous component. I need to take the name of the files selected to the previous component and show to the user.
The modal html
In here i have the modal html where the user selects which files he wants to upload.
After that he clicks in submit and is sending the names of the files to an array.
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h4 class="modal-title">Selecionar Assets</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group text-center">
<input type="file" name="image" (change)="onSelectFile($event)" multiple />
</div>
<div class="row">
<div class="col">
<p class="text-center h4">Asset</p>
</div>
<div class="col">
<p class="text-center h4">Name</p>
</div>
</div>
<div class="row" *ngFor='let url of urls let i = index'>
<div class="col">
<div class="text-center image-preview img-responsive mb-3">
<img [src]="url" height="100" width="100"/>
</div>
</div>
<div class="col trimText">
<div class="text-center mb-3">
<p class="text-center"> {{ names[i] }}</p>
</div>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-primary" (click)="onSubmit(); activeModal.dismiss('Cross click')">Submit</button>
</div>
</div>
</div>
The modal component.ts
In here I'm iterating over the multiple files the user selected and get the name of those files.
When clicked on the button submit i send that array to the component that opens the modal.
#Input() names:Array<string> = [];
#Output() namesEntry: EventEmitter<string[]> = new EventEmitter();
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
var filesAmount = event.target.files.length;
for (let i = 0; i < filesAmount; i++) {
this.names.push(event.target.files[i].name);
var reader = new FileReader();
reader.onload = (event:any) => {
this.urls.push(event.target.result);
}
reader.readAsDataURL(event.target.files[i]);
}
console.log(this.names);
}
}
onSubmit() {
//send to form name of the assets
this.activeModal.close(this.names);
}
The form html
In this part of the component is where I want to show the name of the files that i had in the modal. The problem is that is never showned, even and the array names is not empty and the isActive is true
<div id="assets" class="text-center" *ngIf="isActive; else notActive">
<ng-template #notActive>
<div *ngFor='let name of names'>
<p class="h6">{{name}}</p>
</div>
</ng-template>
</div>
The form component.ts
Here is where I retrieve the array of names from the modal to this component and when i do console.log of this.names return the array with the names and this.isActive returns true.
names:Array<string> = [];
isActive = false;
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(AssetComponent, {size:"lg", backdrop: 'static'});
modalRef.componentInstance.title = 'asset';
modalRef.result.then((result) => {
if (result) {
this.names = result;
this.isActive = true;
}
});
}
Please change the code to following.
<div id="assets" class="text-center" *ngIf="isActive">
<div *ngFor='let names of names'>
<p class="h6">{{name}}</p>
</div>
</div>
Your condition was wrong. It will not render the data because of isActive flag set to true and template was set to render when the isActive flag is false.
Keep in mind, Template(<tempalte #ref></template>) inside the *ngIf will only available when the condition is met.
For example,
<div *ngIf="test else nodData">
Data Available
<template #nodData>No Data available</template>
</div>
Template nodData will not be available unit the ngIf condition met. So the noData wont display. So always keep the ref outside ngIf block for else conditions
<div *ngIf="test else nodData">
Data Available
</div>
<template #nodData>No Data available</template>
Please update your template to render correctly,
In *ngIf condition, template should be outside the condition element
<div id="assets" class="text-center" *ngIf="isActive; else notActive">
<div *ngFor='let names of names'>
<p class="h6">{{name}}</p>
</div>
</div>
<ng-template #notActive>
// Your message or code
</ng-template>
Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!
I want to create the shopping cart using angular js.And i am new to angular js.My question is how to use cart functionality As of now i displayed the products list using REST API
<div class="col-sm-2" ng-repeat="product in productdata">
<div class="col-item">
<div class="photo">
<a ng-href="#/productdesc">
<img src="{{product.imageUrl}}" class="img-responsive" alt="a" />
</a>
</div>
<div class="info">
<div class="row">
<div class="col-md-12">
<h5>{{product.productname}}-{{product.id}}</h5>
<h5 class="price-text-color">${{product.price}}</h5>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<input type="number" value="1" class="form-control text-center" min="1">
</p>
<p class="btn-details">
<a href="#" class="hidden-sm btn btn-group-sm btn-primary">
<i class="fa fa-shopping-cart"></i>Add
</a>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
And i need to know how the values will be saved as cookies or session in browser.
You could use localStorage or sessionStorage to save you shppping cart data.
For example you could use a package like angular-local-storage for working with sessionStorage in a AngularJS app.
UPDATE:
Disclaimer: I didn't tested this code! Is only a sample code to show you the way that you could follow. Good luck! :)
In your app config:
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('yourAppName');
localStorageServiceProvider
.setStorageType('sessionStorage');
});
Service:
myApp.factory('CartProduct', function(localStorageService) {
var cartProducts = [];
function init() {
if (localStorageService.get('cart-products').length) {
cartProducts = localStorageService.get('cart-products');
}
}
init();
function getAll() {
return cartProducts;
}
function add(product) {
cartProducts.push(product);
localStorageService.set('cart-products', cartProducts);
}
return {
add: add,
getAll: getAll
};
});
Controller:
myApp.controller('MyCtrl', function($scope, CartProduct) {
$scope.addToCart = function (product) {
CartProduct.add(product);
}
});
HTML:
<div class="separator clear-left">
<p class="btn-add">
<input type="number" ng-model="product.quantity" value="1" class="form-control text-center" min="1">
</p>
<p class="btn-details">
<a href="#" ng-click="addTocart(product)" class="hidden-sm btn btn-group-sm btn-primary">
<i class="fa fa-shopping-cart"></i>Add
</a>
</p>
</div>
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.
While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.
I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.
Can someone help me understand what's going wrong here and probably a better way to do this if possible.
I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.
Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?
//locationsapp.js var locationsApp = angular.module('locationsApp', []);
var venues = [{
id: "Flknm",
name: "ship",
}, {
id: "lelp",
name: "boat",
}, {
id: "myp",
name: "yacht",
}, ];
var shortlistedVenues = [];
var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);
locationsApp.controller("getvenues", function($scope) {
$scope.venues = venues;
$scope.shortlistThis = function(venue) {
console.log(venue);
if (shortlistedVenues.indexOf(venue) == -1) {
shortlistedVenues.push(venue);
//alert('If');
} else {
console.log('already shortlisted')
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="locations" ng-app="locationsApp">
<div ng-controller="getvenues">
<div ng-repeat="venue in venues" ng-mouseover="" class="venue">
<div ng-controller="manageInfo">
<div class="row-fluid">
<div class="control" ng-click="showInfo()">
</div>
<div class="maps" class="info">
<div ng-class="class">
<div class="close-info" ng-click="hideInfo()">
<i class="fa fa-times">
</i>
</div>
<div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
<div class="">
<div class="row-fluid myclass">
<div class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
Shortlist{{$index}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Full Info Container -->
</div>
</div>
</div>
</div>
<div class="compare">
<button type="button" class="btn btn-default btn-lg btn-sup">
Compare ( {{shortlistedVenues.length}} )
</button>
</div>
</div>
</div>
</div>
</div>
The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index
HTML
<div ng-if="selected==$index" class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup"
ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
</div>
</div>
</div>
& then put ng-click="selected='$index'" on ng-repeat div like
<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">
Working Fiddle
Hope this could help you, Thanks.
I am trying to create random span sized divs(.childBox) of twitter bootstrap using AngularJS.
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" class="col-md-{{boxSpan}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
controller('HomeCtrl', ['$scope', '$http', function($scope,$http) {
$http.get('news/abc.json').success(function(data) {
$scope.news = data;
});
$scope.holderSize = 150;
$scope.holderLink = 'http://placehold.it/'+$scope.holderSize+'x'+$scope.holderSize;
$scope.boxSpan = getRandomSpan();
function getRandomSpan(){
return Math.floor((Math.random()*6)+1);
};
}])
I want to create different integer value for boxSpan for each .childBox div but all .childBox have same boxSpan value. Although everytime i refresh page boxSpan creates random value.
How can i generate different/random value for each ng-repeat iteration?
Just call add getRandomSpan() function to your scope and call it in your template:
$scope.getRandomSpan = function(){
return Math.floor((Math.random()*6)+1);
}
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" class="col-md-{{getRandomSpan()}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
As an alternative to the accepted answer, since you're likely to reuse this function, you can turn it into a filter for convenience:
angular.module('myApp').filter('randomize', function() {
return function(input, scope) {
if (input!=null && input!=undefined && input > 1) {
return Math.floor((Math.random()*input)+1);
}
}
});
Then, you can define the max and use it anywhere on your app:
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" class="col-md-{{6 | randomize}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>
Improvisation of the accepted answer to prevent digest overflow:
var rand = 1;
$scope.initRand = function(){
rand = Math.floor((Math.random()*6)+1)
}
$scope.getRandomSpan = function(){
return rand;
}
<div ng-controller="HomeCtrl">
<div class="motherBox" ng-repeat="n in news">
<div class="childBox" ng-init="initRand()" class="col-md-{{getRandomSpan()}} box">
<a href="#" class="thumbnail">
<img src="{{holderLink}}" height="200px" alt="100x100">
<p class="tBlock"> {{n.title}} </p>
</a>
</div>
</div>
</div>