I have an ng-repeat that has a bunch of ids and loops over them. I then want to load the data from an external source. So let's say I have an array
[1,2,3,4,5]
And I have an ng-repeat that loops over then shows
<div>1</div>
<div>2</div>
...
I want to load additional details from an external source (firebase) to get the details of the users profile so I can show first name and last name which is part of another section and then load them by calling
http://firebase/users/user_1
http://firebase/users/user_2
...
And then somehow map it to the dom or scope so I can then print it using normal angular stuff.
Any idea on how to do this best?
First thing I'd do is make that array usable both before and after the extra data is loaded. I'll assume your full user object has field id
$scope.users = [1,2,3,4].map(function(id) {
return {id: id};
});
This should let you use ng-repeat like this
<div ng-repeat="user in users">
{{user.id}}
</div>
Now, in your controller, load up the user details. I'll assume you have a User $resource or similar service
var userPromises = $scope.users.map(function(user) {
return User.get({id: 'user_' + user.id}).$promise;
});
$q.all(userPromises).then(function(users) {
$scope.users = users;
});
Then just change your template to use the extra details
<div ng-repeat="user in users">
{{user.id}}
<dl ng-if="user.$resolved">
<dt>First name</dt>
<dd>{{ user.firstName }}</dd>
<dt>Last name</dt>
<dd>{{ user.lastName }}</dt>
</dl>
</div>
Related
I am using bootbox, I need display product information in it. The product information is returned as json with rest call. I am thinking using a template, and transform from the json to html. I need ng-repeat etc, in the template. The idea way is I can call template and get a html result.
But it seems angularjs $compile need bind to element to render. any idea?
I think you can use ng-include:
var app = angular.module('myApp', []);
app.controller('productCtrl', function($scope) {
$scope.productInfos = [];
});
Use ng-include (You have to the adjust the path depending the location of your template)
<div ng-app="myApp" ng-controller="productCtrl">
<div ng-include="'product-information.html'"></div>
</div>
You can do ng-repeat in product-information.html:
<div ng-repeat= "info in productInfos"> {{ info.prop1 }}</div>
Just starting out learning AngularJS and decided to mock up a basic product gallery using what I've learned so far and I've hit a roadblock. Currently I have a simple product gallery with 3 templates(category listing, products in category listing and product overview). What I would like to do is set up some sort of conditional, where if the products in a selected category have a sub-category, it displays a list of sub-categories using the category-list template. If they don't have a sub-category it just goes straight to the product-list template.
I have created this Plunker showing where I am at so far.
In the above example, if someone clicks on "Cars" I want it to then show a listing of sub-categories using the category-list template. So when you click "Cars" it would take you to a screen with 2 buttons: 4-door and 2-door. Clicking on one of those buttons would then show you the products from those sub-categories using the product-list template. However, if you were to click on "Trucks" from the initial screen, it would just take you directly to the product-list template since the trucks don't have sub-categories.
Here is my category-list template:
<section id="categories" ng-hide="productsVisible">
<div ng-repeat="product in vm.products" class="category">
<div ng-click="vm.selectCategory(product); showProducts();">
<button>{{product.category}}</button>
</div>
</div>
</section>
And here is my product-list template:
<section id="products" ng-show="productsVisible">
<div ng-repeat="product in vm.selectedCategory.items" class="product">
<a href ng-click="vm.selectProduct(product); showResults();">{{product.name}}</a>
</div>
</section>
See my updated plunker
Basically, you need to extend the selectCategory method by grouping the sub-categories and checking whether we're about to enter this sub-category in subsequent click. Like this:
vm.selectCategory = function(category) {
var subCats = [],
map = {};
if (category.items && !category.items[0].subCategory){
vm.selectedCategory = category;
vm.inSubCat = true;
return;
}
vm.inSubCat = !category.items;
if (category.items) category.items.forEach(function(e){
if (!map[e.subCategory]) subCats.push({category: e.subCategory, name: category.category});
map[e.subCategory] = true;
});
vm.products = subCats;
if (vm.inSubCat) vm.selectedCategory = {items: vm.data.filter(function(c){
return c.category == category.name;
})[0].items.filter(function(p){
return p.subCategory == category.category;
}) };
}
I would suggest your data model could use some work, and put all the products in a single array with categories and subcategories as properties. However, you can get what you want with this change to the products-list.html.
<div ng-show="vm.selectedCategory.category=='Cars'">
<input type="radio" ng-model="subcategory" value="2-Door">Coupe
<input type="radio" ng-model="subcategory" value="4-Door">Sedan
</div>
<section id="products" ng-show="productsVisible">
<div ng-repeat="product in vm.selectedCategory.items" class="product">
<a ng-show="product.subCategory===subcategory" href ng-click="vm.selectProduct(product); showResults();">{{product.name}}</a>
</div>
</section>
I advice you to refactor the code in two possible ways:
a) Try to remove lines from controller that control the view (the process of displaying different directives) and use events in directives
b) Control your view by using ng-show and ng-hide directives that will show or hide some part of your code.
I have a question regarding the directive ng-repeat. Is it possible to perform manipulation to each item in a collection?
<div ng-repeat = "item in items">
</div>
Is there any possible way to call a Meteor method to perform some sort of manipulation to each item?
I'll be more specific. What I'm doing is using the meteor twitter accounts and every time a user logs in, it stored in a database.
index.ng.html :
<div ng-controller = "TweetsCtrl">
<div ng-repeat = "t in twitterAccs">
<img src = "{{t.services.twitter.profile_image_url_https}}">
<br>
<i>#{{t.services.twitter.screenName}}</i>
<br>
<br>
</div>
</div>
JS file :
if (Meteor.isClient) {
angular.module('twitter-example',['angular-meteor']);
angular.module('twitter-example').controller('TweetsCtrl', ['$scope','$meteor', function($scope,$meteor) {
$scope.twitterAccs = $meteor.collection(Meteor.users);
}]);
}
Right now, its able to get the image and the twitter handle. What I want to do is extract the number of followers and friends but that requires OAUTH from Twitter. Since those require special keys from Twitter, I know I have to put that information in the if (Meteor.isServer) scope.
I have a list of objects from Firebase using the angularFire implicit data sync, and I'd like to render their unique ids (for use in urls) along with the other data properties using ng-repeat. Can I make angularFire return in such a way that I have access to the object ids within ng-repeat, the same way that members of an angularFireCollection have an $id property? If not, what is the right way to accomplish this? Hypothetical code (that doesn't work):
Controller:
myApp.controller('ItemListCtrl', ['$scope', 'angularFire',
function ItemListCtrl($scope, angularFire) {
var ref = new Firebase(firebaseUrl);
angularFire(ref, $scope, 'items');
}
]);
View:
<div ng-repeat="item in items" >
{{item.text}}
</div>
I think all you need is:
<div ng-repeat="(name, item) in items">
{{item.text}}
</div>
The anglularFire object behaves just like a normal javascript object.
To get the unique ID that is created via the angularfire $add method, you can use the $id property:
<div ng-repeat="item in items" >
{{item.text}}
</div>
There is a list of users loaded from an api
<div ng:controller="UserController">
<li ng-repeat="user in users">
<a ng:click="select(user)">
{{user.first_name}} {{user.last_name}}
</a>
</li>
</div>
When a user is clicked I want to open an extra view that shows some detailed information of the user. Imagine the view like this
The small blue area is the selected user and the big blue area the container that shows detailed user information.
function UserController($scope){
$scope.select = function(user){
console.log(user);
}
}
So when the user is clicked I can log the user object. It works until this point. But I absolutely have no idea how to open the extra container filled with user data.
Is there a way to simply load a template from file system, pass the object and append the whole thing to the current view? How would I do this with angular.js?
No need to load templates or anything. Just put the data in the scope, and use expressions in the big blue section that reference the data. Angular will handle changing the displayed content when the selection is changed. You can hide the relevant section with ng-show until the data get selected.
Here's a fiddle example.
function UserController($scope){
$scope.users = [{name:'me',email:'mine'}, {name:'you',email:'yours'}];
$scope.selectedUser = null;
$scope.select = function(user){
$scope.selectedUser = user;
}
}
and
<div ng-controller="UserController">
<button class="btn" ng-click="select(users[0])">User 1</button>
<button class="btn" ng-click="select(users[1])">User 2</button>
<hr>
<div ng-show="selectedUser != null">
<div>{{selectedUser.name}}</div>
<div>{{selectedUser.email}}</div>
</div>
You could highlight the corresponding small blue box with a similar ng-class or ng-style attribute (e.g. ng-class="{active: selectedUser == user}"). See What is the best way to conditionally apply a class?