I don't get the correct data back. What is my mistake?
var ref = firebase.database().ref("Entries/kategorie");
ref.once("value")
.then(function(snapshot) {
$scope.tmp = snapshot.val();
$scope.$apply(function () {
$scope.data = $scope.tmp
// returns what you see in the image
console.log($scope.tmp.catname);
// The Log statement returns ["Cat1", "Cat2", "Cat3"] so the array which i need.
})
});
This is what i get back.
This is the html
<div ng-repeat="cat in data" class="animated lightSpeedIn">
<a nav-transition="none"><div ng-style="{'background': 'url(' + cat.bgurl + ')','background-repeat': 'no-repeat','background-size': 'cover','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
<div class="inner">
<h1>{{cat.catname}}</h1>
<h4>{{cat.subtitle}}</h4>
</div>
</div></a>
</div>
I thought with cat.catname it's possible to get the catnameurl. But that seems to be wrong...
Your returned data is in little bit incorrect format. The correct way is to return array of objects
But, you can do this:
<div ng-repeat="catname in data.catname" class="animated lightSpeedIn">
<a nav-transition="none"><div ng-style="{'background': 'url(' + data.bgurl[$index] + ')','background-repeat': 'no-repeat','background-size': 'cover','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
<div class="inner">
<h1>{{catname}}</h1>
<h4>{{cat.subtitle[$index]}}</h4>
</div>
</div></a>
</div>
You do have a very "unusual" data model. But I leave that up to you. Based on your data model, your html should look like this:
<div ng-repeat="bgurl in data.bgurl" class="animated lightSpeedIn">
<a nav-transition="none"><div ng-style="{'background': 'url(' + bgurl + ')','background-repeat': 'no-repeat','background-size': 'cover','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
<div class="inner">
<h1>{{data.catname[$index]}}</h1>
<h4>{{data.subtitle[$index]}}</h4>
</div>
I would recommend that you structure your data like this (attention: this structure does not fit the HTML that I just proposed in this answer)
[
{bgurl:'abc', catname:'name1', subtitle:'my first cat'},
{bgurl:'xyz', catname:'name2', subtitle:'my second cat'}
]
Related
I am doing the progress bar for each object equipment.
Here is my AngularJS code:
$scope.progressBarEquipements=function(idEquipement) {
$http.get(url+"/RestResponseCheckLists?idEq="+idEquipement)
.success(function(data) {
$scope.Pourcentage = data;
}).error(function(err, data) {
console.log("error : " +data);
});
};
This function returns $scope.progressBarEquipements=function(idEquipement):
console.log("data "+Pourcentage);
/**
* [{'NB_Resp':2,'NB_checks':154}] //For the first object And the others not
*/
Here is my HTML code:
<div class="col-md-4" ng-repeat="eq in Checksf" ng-init="progressBarEquipements(eq.idEquipements)">
<h4 class="list-group-item-heading" >{{eq.nomEq}} </h4>
<div class="progress progress-lg m-b-5" >
<div class="progress-bar progress-bar-purple" role="progressbar" ng-repeat="p in Pourcentage" ng-style="{width:{{((p.NB_Resp/p.NB_checks) * 100)}} + '%'}">
{{((p.NB_Resp/p.NB_checks) * 100) | number:0}}%
</div>
</div>
</div>
So I have four items of equipment are displayed in the html page.
The $scope.Percentage displays the progress bar calculation for the
first object only.
How to display for each object its calculation in the progress bar?
thank you in advance
Although, I don't like the way you are using ng-init, the following should work :
$scope.progressBarEquipements=function(eq) {
$http.get(url+"/RestResponseCheckLists?idEq="+ eq.idEquipement)
.success(function(data) {
eq.Pourcentage = data;
}).error(function(err, data) {
console.log("error : " +data);
});
};
<div class="col-md-4" ng-repeat="eq in Checksf" ng-init="progressBarEquipements(eq)">
<h4 class="list-group-item-heading" >{{eq.nomEq}} </h4>
<div class="progress progress-lg m-b-5" >
<div class="progress-bar progress-bar-purple" role="progressbar" ng-repeat="p in eq.Pourcentage" ng-style="{width:{{((p.NB_Resp/p.NB_checks) * 100)}} + '%'}">
{{((p.NB_Resp/p.NB_checks) * 100) | number:0}}%
</div>
</div>
</div>
The idea was to send your function "progressBarEquipements" the full equipment object. In that way, you are able to update it when the server responds.
I don't like the approach of using ng-init because
- the behaviour of your view is kinda hidden between your controller, and your template.
- If I had to do it, my API would give the viewmodel containing every information I need to display.
Hi currently i´m programming a application in AngularJs with api rest, but there is something that i miss.
Customers can create organizations with their branchoffices. To create and show the organizations and branchoffices i use the code below.
when the user create an organization there isn´t any problem, but when the user create the second one, the code update the first entry and generate as second one with the same value. so you hava a duplicate key.
What i´m doing wrong?
below you can see the code and pictures attached
First time introduce data and send api, but second time appear the same text. I introduce the new value and send to api rest, and api answer with a right values, but myorganizations variable has the duplicate key with the new value.
First time
Second time
Results
HTML File
<div class="row">
<h4>Mis Organizaciones <small><span class="glyphicon glyphicon-plus"></span></small></h4>
</div>
<div class="row" ng-repeat="organization in myorganizations.data">
<h5>{{organization.company_name}}</h5>
<div ng-repeat="branch in organization.branches">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 ">
<div class="thumbnail">
<a ui-sref="mybranchoffice({name: '{{branch.branch_name}}', id: '{{branch.branch_id}}', company_id: '{{organization.company_id}}'})">
<div class="thumbnail-organization" style="background: url({{branch.branch_image_url}}) center center no-repeat;"></div>
</a>
<div class="caption">
<h6 class="thumbnail-organization-name"></h6>
</div>
</div>
</div>
<div class="clearfix visible-sm" ng-if="($index+1)%2==0"></div>
<div class="clearfix visible-md" ng-if="($index+1)%3==0"></div>
<div class="clearfix visible-lg" ng-if="($index+1)%4==0"></div>
</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<div class="jumbotron">
<a type="button" href="" data-company="{{organization.company_id}}" data-toggle="modal" data-target="#branchModal">Create new Branch</a>
</div>
</div>
</div>
<div class="row col-lg-5 col-md-5 col-sm-6 col-xs-12">
<div class="jumbotron">
<a type="button" href="" data-toggle="modal" data-target="#organizationModal" >Create new Organization</a>
</div>
</div>
</div>
Controller
$scope.newOrganization = function () {
butlerService.createOrganization($scope.organization).then(function(neworganization){
console.log(neworganization);
tmp.data[0].company_id = neworganization.data.company_id;
tmp.data[0].company_name = neworganization.data.company_name;
tmp.data[0].branches=[];
console.log(tmp);
$scope.myorganizations.data.push(tmp.data[0]);
console.log($scope.myorganizations);
}), function (error){
}
}
Service
createOrganization: function (organization) {
var deferred = $q.defer();
$http({
method: "post",
url: urlCreateOrganization,
data: organization
})
.success(function(response){
deferred.resolve(response);
})
.error(function(err){
deferred.reject(err);
});
return deferred.promise;
}
Without seeing your variable init it is hard to say for sure, but it seems that here:
tmp.data[0].company_id = neworganization.data.company_id;
tmp.data[0].company_name = neworganization.data.company_name;
tmp.data[0].branches=[];
you are rewriting over the first element in your array. And here:
$scope.myorganizations.data.push(tmp.data[0]);
You are pushing once more the same reference to variable in an array.
Just create new variable before you assign values to it and before you push it in the array.
Something like this:
var tmp = {};
tmp.company_id = neworganization.data.company_id;
tmp.company_name = neworganization.data.company_name;
tmp.branches=[];
console.log(tmp);
$scope.myorganizations.data.push(tmp);
FYI http returns promisse, you don't have to wrap it once more.
I am using http.get and i need to reload a template after selecting a character so that my template gives the answer according to what I selected
The code of the template
<div class="container-fluid" ng-controller="CriterioCtrl">
<div id="result"></div>
<div>
Selected Items:
<div ng-repeat="id in selection">
{{id}}
</div>
</div>
<div ng-repeat-start="crit in data" class="row">
<h2 align="center">{{crit.name}}</h2>
<div ng-repeat="caracter in crit.characters" class="col-md-4">
<div type="checkbox" value="{{caracter.id}}" ng-checked="selection.indexOf(caracter.id) > -1" ng-click="clickSelection(caracter.id)">
<a href="#crit" class="thumbnail" ng-click="clickCriterios(caracter.id)">
<h4 align="center">{{caracter.name}}</h4>
<img ng-src="http://skaphandrus.com/{{caracter.image_url}}"/>
</a>
</div>
</div>
</div>
<div ng-repeat-end>
</div>
<!--<button class="btn" ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p> codigo de um botao -->
</div>
This code is for the selection
$scope.selection=[];
$scope.clickSelection = function clickSelection(caracterId) {
var idx = $scope.selection.indexOf(caracterId);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(caracterId);
}
var selectedId = $scope.selection;
console.log(selectedId);
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("idSelect", selectedId);
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("idSelect");
}
};
This code is the http part in another controller
MyApp.controller('EspeciesCtrl', function ($scope, $http) {
$http({
url: 'someurl',
method: "post",
params: {module_id: localStorage.getItem("idMod"),"characters[]": [localStorage.getItem("idSelect")]}
})
.then(function(res){
$scope.data = res.data;
});
});
This is the code of the template that have to change after the selection
<div class="container-fluid" ng-controller="EspeciesCtrl">
<div class="row">
<div ng-repeat="esp in data" class="col-md-6">
<a href="#infEsp" class="thumbnail" ng-click="clickEspecie(esp.id)">
<h4 align="center">{{esp.name}}</h4>
<img ng-src="{{esp.image_src}}"/>
</a>
</div>
</div>
</div>
How can i do that?
edit 1
If I've correctly understood, you may need to use ng-show (https://docs.angularjs.org/api/ng/directive/ngShow) whose boolean value checks if the user selected anything and show the extra bit of code you need, instead of trying to have another http request.
Also, it seems like you are using $scope.data for both the esp and the crit, so you will end up with the errors.
You probably don't need to reload the template.
You may want to use the data in $scope.data inside the template in order to let Angular manage the update on the view. As soon as the $scope.data changes, the rendered HTML changes too.
I can't comment but it would be helpful if you could share the template you are using and be more specific in your request :)
I have an ng-repeat which shows a list of sports and next to every sport name I'd like to display an specific image. I'd like to know how to go about displaying the correct png for every sport. How could I make it know what image to display? Here's how the code looks like.
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<ion-list class="list">
<div class="item">
<img src="" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</ion-list>
</div>
I am supposing you want the image based on a key (like sport name). You can maintain a javascript object in your controller with key as name and value can be url of the image
obj = {football:'myurl'}
and use this object as
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sportsFilter = ( sports | sportsFiltered:query )">
<ion-list show-delete="sport.showStars"
class="list">
<div class="item">
<img ng-src="{{obj[sport.name]}}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
You should use ng-src instead of src, so that you can pass the variable into it representing the current image to display, without risking an error 404 while the angular expression isn't parsed yet:
<img ng-src="{{sport.image}}" />
In JS part, you would merely have in your controller a kind of:
$scope.sport = {image: "http://myServer.com/mySuperSportImage.jpg"};
Note that this example doesn't deal with collections to simplify.
This ensures the binding.
You should create an object property for the image:
// HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<div class="item">
<img width="30" height="30" src="{{ sport.im }}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</div>
</div>
// JS
angular.module('myApp',[])
.controller('MyCtrl', function($scope) {
$scope.sport = {
leagues: ['premier', 'championship'],
checked: true
};
$scope.sports = [
{
name: 'soccer',
im: 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'
},
{
name: 'basketball',
im: 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png'
}
];
});
See this fiddle:
http://jsfiddle.net/uxu21n4v/1/
<img ng-src="http://www.gravatar.com/avatar/{{sport.imageLocation}}" class="sport-image"/>
Ref: https://docs.angularjs.org/api/ng/directive/ngSrc
I am trying to show exact content when I click on data from ng-repeat.
<div ng-repeat="trailSpot in trail.wayPoints">
<a ng-click="viewState.showSpotDetails = !viewState.showSpotDetails">
<p>Spot {{$index + 1}}. {{trailSpot.wpName}}</p>
</a>
<p >{{trailSpot.wpDescription}}</p>
</div>
When I click the first wpName, I want to show wpDescription only about the first wpName on another div. What should I put in that div.
<div class="panel-body" ng-show="viewState.showSpotDetails">
<div>
???
</div>
</div>
Anybody has any tips on what I am trying to do?Thank you!
Just pass the object to assign the property like this:
http://jsfiddle.net/wLs8axLj/
JS
var app = angular.module('itemsApp',[]);
app.controller('ItemsCtrl',function($scope) {
$scope.items = [
{name:'Test 1',details:'Test 1 Details'},
{name:'Test 2',details:'Test 2 Details'}
];
$scope.showDetails = function(i) {
$scope.item_details = i.details;
};
});
HTML
<div ng-app="itemsApp" ng-controller="ItemsCtrl">
<ul>
<li ng-repeat="i in items" ng-click="showDetails(i)">{{i.name}}</li>
</ul>
<hr>
{{item_details}}
</div>