When I run $getIndex() on my projects node I get an empty array. Why? and am I using it incorrectly?
Here's a fiddle http://jsfiddle.net/G55jS/1/
js
angular.module('todo', ['firebase']);
angular.module('todo').controller('TodoCtrl', function($scope, $firebase) {
var projectsUrl = "https://ionic-guide-harry.firebaseio.com/projects/";
var projectRef = new Firebase(projectsUrl);
$scope.projects = $firebase(projectRef);
$scope.projects.$on('loaded', function() {
$scope.keys = $scope.projects.$getIndex();
});
});
html
<div ng-app="todo" ng-controller="TodoCtrl">
<div ng-view>
{{keys}}
</div>
</div>
Screen cap of my data layout
Seems like it's a known bug and has been fixed. Will be fixed in the upcoming release https://github.com/firebase/angularFire/issues/262
Update: the fix was merged into the 0.7.1 release
Related
I made a jsfiddle here to make angular question: https://jsfiddle.net/b6xgjfwg/
<div ng-controller="AppCtrl">
Hello {{name}}
</div>
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.name = 'Sally';
}
same as http://jsfiddle.net/thomporter/tcVhN/
But not working.
I am new to jsfiddle and help me.
Please see below screen show. You can see that I specified to load my angular in the head (no-wrap) and also reformatted my code to be more "correct"
try this instead
var app = angular.module('app',[]);
app.controller('AppCtrl', function AppCtrl($scope) {
$scope.name = 'Sally';
});
I'm trying to develop a solution through AngularJS where when the user changes the profile image, all other photos based on their profile are also changed.
How can I start developing this feature?
Thanks in advance!
[Solution]
With the help of the #wolfman6377, I can understand the functionality and develop the solution for what I need. I'll leave an example in CodePen.
CodePen
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function() {
this.myVar = 'https://robohash.org/asd'
this.updatePicture = function() {
this.myVar = 'https://angular.io/resources/images/logos/angular/angular.png';
};
});
Thank you, #wolfman6377.
You are using a jQuery-like strategy. jQuery element selector will not be able to change the value of myVar.
I would recommend going through some basic tutorials on angular1. But in a nutshell, you need to:
Do not grab elements and change attributes
add a module to the ng-app value
Use ng-controller in the template
Add ng-click to the button to update the value of myVar
template
<body ng-app="myApp">
<div id="var" ng-controller="myController as vm">
<img ng-src={{vm.myVar}} />
<button ng-click="vm.updatePicture()">Click me</button>
</div>
</body>
controller:
angular
.module('myApp', [])
.controller('myController', function() {
this.myVar = 'https://www.w3schools.com/angular/pic_angular.jpg'
this.updatePicture = function() {
this.myVar = 'https://angular.io/resources/images/logos/angular/angular.png';
};
});
i am using angular js, bootstrap thumbnail and google cloud endpoints for my app.
The .html looks part looks like:
<body ng-controller="SearchController as searchCtrl">
<div class="row">
<div class="col-sm-2 col-md-2" ng-repeat="result in searchCtrl.searchResults">
<div class="thumbnail">
<img ng-src="{{result.thumbnailUrl}}">
</div>
</div>
</div>
The .js looks like below
(function(){
var app = angular.module('InstaMonitorAdmin', []);
app.controller('SearchController', function(){
this.searchResults = {};
this.searchTags = function(keyword){
//this.searchResults = results;
gapi.client.instagramApi.searchTags({'keyword':keyword}).execute(function(resp) {
if(resp && resp.hasOwnProperty('error')) {
// error
alert(resp.error.message);
}else{
var myJsonString = JSON.stringify(resp.items);
this.searchResults = myJsonString;
console.log(myJsonString);
}
});
};
});
In the console debugger it shows data for myJsonString as:
{"userName":"vikceo",
"caption":"#sandsculpture #sandcastle",
"tags":"[mountains, breathtaking, love, skyporn, minion]",
"thumbnailUrl":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/13108860_653673808116072_1235622514_n.jpg",
"kind":"instagramApi#resourcesItem"},
{"userName":"neetipari","caption":"My love #passion",
"tags":"[weddingcake, love, fondantcakes, foodporn]",
"thumbnailUrl":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/12940136_423862367814317_252510398_n.jpg",
"kind":"instagramApi#resourcesItem”}]
The issue is that the page does not render the search results returned from the google end point. I have tested that it return the results fine.
if i comment it and uncomment the top line where i am passing a hard coded array then it works fine.
Is it because it takes more time for response to come and assign to array? I thought it will continue to listen to this array. Please advise
so the problem turned out to be how i assigned the returned results. this is the final method:
app.controller('SearchController', function(){
this.searchResults = {};
this.searchTags = function(keyword){
var data = this;
data.searchResults = [];
gapi.client.instagramApi.searchTags({'keyword':keyword}).execute(function(resp) {
if(resp && resp.hasOwnProperty('error')) {
// error
alert(resp.error.message);
}else{
//successful login
console.log(resp);
data.searchResults = resp.items;
}
});
};
To have a synchronous assignment to the array , you could wait for the execution such as:
gapi.client.instagramApi.searchTags({'keyword':keyword}).execute(function(resp)).then(function(ress) {
//console.log(ress.items);
this.searchResults = ress;
});
Just add an ng-if, if you add ng-if element creates after data is come
<div ng-if="searchCtrl.searchResults.length" class="col-sm-2 col-md-2" ng-repeat="result in searchCtrl.searchResults.items">
<div class="thumbnail">
<img ng-src="{{result.thumbnailUrl}}">
</div>
</div>
Using an array, I am trying to filter and show the unique information in the list. For that I use the angular inbuild filter method.
But I am getting error.
Here is my try (I am filtering by SubProjectName)
<ul>
<li ng-repeat="project in projectNames | unique: 'SubProjectName' ">
{project.SubProjectName}}
</li>
</ul>
Live Demo
AngularJS doesn't include a unique filter by default. You can use the one from angular-filter. Just include the JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
and include the dependeny in your app:
var app = angular.module('myApp', ['angular.filter']);
Your code should work right away! I edited your Plunker so it works.
I think you are looking for an answer like this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.projectNames=projects
$scope.Id = "1";
$scope.SubProjectName="Retail Building";
})
.filter('unique', function() {
return function(projects, subProjectName) {
var newprojects =[];
projects.forEach(function(project){
if(project.SubProjectName === subProjectName)
newprojects.push(project);
});
return newprojects;
};
});
<li ng-repeat="project in projectNames | unique:SubProjectName">{{project.SubProjectName}}</li>
Demo
The unique filter you are probably attempting to use comes from AngularUI, so you need to include it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
and add it as module dependency:
var app = angular.module('plunker', ['ui.filters']);
I have updated your plunkr as http://plnkr.co/edit/sx3u1ukH9752oR1Jfx6R?p=preview
added filter dependency
var app = angular.module('plunker', ['angular.filter']);
Hope this may help you
I don't know what's wrong here. An explanation would be lovely. Thanks!
http://jsfiddle.net/natecraft/xKtwP/13/
<body data-ng-app="channelApp">
<div data-ng-controller="channelController">
Hello! {{ name }}
</div>
</body>
var mod = angular.module("channelApp", []);
mod.controller = ("channelController", function($scope) {
$scope.name = "nate";
});
There are two separate issues causing this unexpected behavior. First, the syntax for the controller should be like this:
var mod = angular.module("channelApp", []);
mod.controller("channelController", function($scope) {
$scope.name = "nate";
});
Second, the fiddle is setup incorrectly and still won't render properly after making the above fix. I have fixed the fiddle configuration in this forked version of your fiddle.
I also created the code example in CodePen for further reference.