I'm trying to show image url from database on GUI with Blueimp Lightbox gallery but i get some error
Here is my html and js code:
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="lightBoxGallery">
<div ng-repeat="i in images" class="col-sm-12 m-b-xs" style="padding-left: 0px;">
<a href="i.url" title="i.title" data-gallery="">
<img src="i.url">
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child
element of the document body
-->
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
</div>
</div>
</div>
Angular controller
.controller('ImagesCtrl', function ($rootScope, $scope, $state, $stateParams, ImagesService) {
$scope.find = function() {
ImagesService.find()
.success(function(data, status) {
$scope.images = data;
})
.error(function(data, status) {
$.growl({ message: '<br>Getting data failed', title: '<b>ERROR</b>' }, { type: 'danger' });
});
}
$scope.find();
});
as result on GUI i get list of objects in images variable, but it show me error for this i.url
GET http://localhost:8080/i.url 404 (Not Found)
but when i go to network tab in browser i see this object and value inside variable url.
Does anyone know what could be the problem?
ERRONEOUS
<div ng-repeat="i in images" class="col-sm-12 m-b-xs" style="padding-left: 0px;">
<a href="i.url" title="i.title" data-gallery="">
<img src="i.url">
</a>
</div>
The attributes need double curley brackets:
<div ng-repeat="i in images" class="col-sm-12 m-b-xs" style="padding-left: 0px;">
<a href="{{i.url}}" title="{{i.title}}" data-gallery="">
<img src="{{i.url}}">
</a>
</div>
Related
The videos work fine if I go directly to the page (/stream), but if load that page through ng-view, the video won't load and I'm not sure what's wrong.
In index.html:
<a href="#stream">stream</a
<div ng-view></div>
In stream.html:
<style>
video {
width: 250px;
height: 150px;
}
</style>
<nav class="row">
<div class="col-xs-6 col-md-1">
</div>
<div class="col-xs-6 col-md-2">
<a href ng-click = "controller.setVideo(0)">
<div style="text-align:center">stream 1</div>
<video data-dashjs-player autoplay src="http://localhost:1935/test/test1.stream/manifest.mpd" muted></video>
</a>
</div>
<div class="col-xs-6 col-md-2">
<a href ng-click = "controller.setVideo(1)">
<div style="text-align:center">stream 2</div>
<video data-dashjs-player autoplay src="http://vm2.dashif.org/livesim/testpic_2s/Manifest.mpd" muted></video>
</a>
</div>
</nav>
In app.js:
App.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/stream", {
templateUrl : "stream.html"
});
});
I am learning as I go with my first Angular project and have ran into an issue.
Goal: When an link is clicked in a given .html template placed in with ng-include, I want it to change the value of $scope.selectedLocation
The issue: The value of $scope.selectedLocation does not change.
I read that the ng-include creates a child scope, so in order to change the parent scope variable, you could place $parent in front of the value. I have tried this and it does not work.
Main index page:
<body ng-app="photoApp" id="bodyDiv" >
<div ng-controller="PhotoGallery">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
</div>
<div ng-switch-when="loc1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="loc2">
<div ng-include="'file2.html'"></div>
</div>
</ng-switch>
</div>
</div>
</body>
home.html code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
photoApp.js code:
var photoApp= angular.module('photoApp', []);
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.selectedLocation ="home";
}
The issue is that you're binding to a primitive in an inherited scope. To fix it you should pass an object:
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.vm = {
selectedLocation: "home"
}
}
Html
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
ng-include creates a new scope that inherits the parent (controller) scope through the prototype chain. In javascript you can't replace the value of the shadowed inherited property. Passing an object works as you're changing a property on a pointer to the object.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
You seem to have misnamed your app variable. Either name westonPhotographyApp photoApp or vice-versa:
var photoApp = angular.module('photoApp', []);
photoApp.controller('PhotoGallery', function($scope) {
$scope.selectedLocation ="home";
}
Anyways, you could improve on your design:
You could use controllerAs syntax. It names your controller and makes it accessible throughout descendant scopes:
Index:
<div ng-controller="PhotoGallery as pgCtrl">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
...
Home:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
With your controller:
photoApp.controller('PhotoGallery', function() {
var vm = this;
vm.selectedLocation ="home";
}
I am working with Ionic framework.
I've got two templates both of which use the same "ListController" controller:
1) A list of products.
2) A detailed view of a specific product.
Both templates have a counter field which should be updated when user adds or removes products.
On the header I have a counter for the sum of all products.
What I need is to automatically be updated the fields(specific product counter, total counter) in two templates. When I say automatically I mean when the user adds products in the first template then these should be updated to the second one.
Here's my first template:
<ion-list>
<ion-item class="noPadding" ng-repeat="item in meatTypes" href="#/{{item.imgname}}">
<div class="row counterLine relative noPadding">
<img class="counterBg" src="img/counter.png" alt="pansetes" align="right"/>
<span class="itemCounter" id="product_{{item.id}}">0</span>
</div>
<div class="row">
<div class="col relative">
<img class="itemImg" src="img/{{item.imgname}}.png" alt="pansetes"/>
</div>
<div class="col relative">
<ul class="centerize">
<li class="itemTitle ">{{item.name}}</li>
<li class="itemSubtitle">{{item.subname}}</li>
</ul>
</div>
<div class="col relative">
<ul class="centerize">
<li class="itemPrice">{{item.price}}€</li>
<li class="itemDiscount">{{item.productdiscount}}%</li>
</ul>
</div>
<div class="col relative">
<button class="addMore centerize" id="addMore" onclick="return false">+</button>
</div>
</div>
</ion-item>
</ion-list>
Here's my second template:
<ion-list>
<ion-item class="noPadding" ng-repeat="item in meatTypes | filter: {imgname : whichproduct}">
<div class="row noPadding">
<div class="col col-20 noPadding item-text-wrap">
<p class="expires">
Κατανάλωση εντός </br> <strong>4</strong> </br>Hμερών.
</p>
</div>
<div class="col noPadding col-60">
<img class="detailsImg" src="/img/{{item.imgname}}.png" alt="{{item.name}}"/>
</div>
<div class="col col-20 noPadding">
<div class="row noPadding">
<div class="col noPadding">
<img class="detailsCounterBg" src="img/counter.png" alt="pansetes" align="right"/>
<span class="itemCounter" id="detailsCounter">{{counters[item.id]}}</span>
</div>
</div>
<div class="row noPadding">
<div class="col noPadding">
<ul>
<li><button class="addMore" id="addMore">+</button></li>
<li><button class="addMore" id="subMore">-</button></li>
</ul>
</div>
</div>
</div>
</div>
</ion-item>
</ion-list>
And here's my app.js router and controller:
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('list')
$stateProvider
.state('list', {
url: '/list',
templateUrl: '/templates/product-list.html'
})
$stateProvider
.state('details', {
url: '/:aId',
templateUrl: '/templates/detail.html',
controller: "ListController"
})
})
.controller('ListController',function($scope, $http, $state){
$http.get('js/data.json').success(function(data){
$scope.meatTypes = data;
$scope.whichproduct = $state.params.aId;
$scope.total = $('#totalCounter').html();
$scope.counters = [];
$(".itemCounter").each(function(){
$scope.counters.push($(this).text());
});
});
});
For now I have found a permanent solution as you can see in my controller but I think it misses something.
here's a :screenshot
I have been using carousel slider in my application and works fine with this code
JS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$scope.stores = ["Emil", "Tobias", "Linus"];
});
CsHtml
<div class="container" ng-app="myApp" ng-controller="offerCtrl">
<div class="dynamicTile">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in stores">
<div id="{{ 'tile' + ($index + 1) }}" class="tile">
<a href="#" class="rippler rippler-default">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" ng-repeat="x in stores" ng-class="{'active': $first}">
<img src="~/assets/images/Stores/{{x.StoreId}}/Product/{{y.ProductId}}.png" class="img-responsive" />
<span class="caption"><i class="fa fa-tags"></i>{{y.ProductName}}</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row " style="">
<div class="col-sm-12">
Show All
</div>
</div>
</div>
</div>
but when i changed my JS code to fetch data dynamically, carousel stop working i.e. images not sliding.
Problem occur with this jS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$http.get("..//Home/getOffers")
.then(function (response) { $scope.stores = response.data; });
});
What causing the problem ?
This is used for match the following option.
While I drag the div id 'div2' along with this first div id 'div1' also to be dragged. how to set draggable false for div id 'div1'
.controller('BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2', function($scope, $stateParams, $http)
{
$scope.OnDropComplete = function (index, source)
{
var otherObj = $scope.category_Question[index];
var otherIndex = $scope.category_Question.indexOf(source);
$scope.category_Question[index] = source;
$scope.category_Question[otherIndex] = otherObj;
}
})
--------------------------------------------------------
<div ng-repeat="source in category_Question" ng-controller="BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2" >
<div class="card" id="div1" draggable="false">
<div class="item item-divider">{{ $index+1 }}.Sentence </div>
<div class="item item-text-wrap" style="color:#CC0066;font-weight:bold;">{{ source.Sentance }}</div>
</div>
<div class="card" id="div2" ng-drop="true" ng-drop-success="OnDropComplete($index,$data)">
<div ng-drag="true" ng-drag-data="source" ng-class="source.Response">
<div class="item item-divider">Response</div>
<div class="item item-text-wrap"> {{ source.Response }} </div>
</div>
</div>
</div>
--------------------------------------------------------
You're using the wrong attribute. draggable="false".
It should be ng-cancel-drag
Your html would look like:
<div class="card" id="div1" ng-cancel-drag>
...
</div>