I've defined two collections in Angular:
app.controller('MainCtrl', function($scope, PieceService, TeamService) {
PieceService.query(function(data){
$scope.pieces = data;
});
TeamService.query(function(data){
$scope.teams = data;
});
});
pieces is a collection that looks like this: [{name:'Petra',team_id:2},{name:'Jan',team_id:3}]
team is a collection that looks like this: [{name:'TeamA',id:2},{name:'Team',id:3}]
In the template I am iterating over the pieces collection:
<tr data-ng-repeat="piece in pieces">
How can I print the teamname of each piece?
I've tried creating a filter that does this, but as I don't see how I can access the scope in a filter I'm without luck so far.
Not sure if this is the sexiest angular way to do it, but I would create a function inside your controller to do the lookup. I also decided to cache the team_id to name lookup, but I realize it's not really necessary for a 2x2 search.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.pieces = [{name:'Petra',team_id:2},{name:'Jan',team_id:3}];
$scope.teams = [{name:'TeamA',id:2},{name:'TeamB',id:3}];
var idcache = {};
$scope.getTeam = function(id) {
if(idcache[id]) {
return idcache[id];
}
//cache this
$scope.teams.forEach(function(team) {
idcache[team.id] = team.name;
});
return idcache[id];
}
});
I've created a plunkr with the example code.
http://plnkr.co/edit/DsafIfMfARurNeVcl9Qd?p=preview
Use team ID as an object key, like this:
$scope.teamLookup = {}
// do this in the query callback
angular.forEach($scope.teams, function(val, key){
$scope.teamLookup[val.id] = val.name
});
Then, your markup can look like this:
<tr data-ng-repeat="piece in pieces">
<td>{{teamLookup[piece.team_id]}}</td>
<td>{{piece.name}}</td>
</tr>
Related
I have an app where I need to store artists and their details in database.Now I want to retrieve all the artists and render some of their details in front end.How to do that.
Secondly, if I get the artist rating in some input field by using ng-model, then how to store that value in a particular artist to update details.
The database structure is:
{
"artists": {
"Atif":{
"name":"atif",
"rating":8
},
"Himesh":{
"name":"himesh",
"rating":5
}
}
}
and this is angular.js
(function()
{
var app = angular.module("myapp", ["firebase"]);
app.controller("maincontroller", function($scope, $firebaseObject,$firebaseArray)
{
var ref = new Firebase("https://gigstart.firebaseio.com/");
var artists=ref.child("artists");
// download the data into a local object
$scope.data = $firebaseObject(ref);
// putting a console.log here won't work, see below
ref.on("value", function(snapshot)
{
console.log(snapshot.val());
}, function (errorObject)
{
console.log("The read failed: " + errorObject.code);
});
var artistsRef=new Firebase("https://gigstart.firebaseio.com//artists");
}); //end of controller
Now I want to render the name and rating of each artist in front end.Can I do something like
<div ng-repeat="artist in artists">
{{artist.name}}
{{artist.rating}}
</div>
You have a list of artists, which you want to ng-repeat over in your Angular view. You can accomplish that by:
app.controller("maincontroller", function($scope, $firebaseArray)
{
var ref = new Firebase("https://gigstart.firebaseio.com/");
var artists = ref.child("artists");
$scope.artists = new $firebaseArray(artists);
}
Please take a moment to go through the AngularFire quickstart before starting on your own project. This is covered in step 5.
So I didn't get an answer from my last question so I decided to handle this myself.
I created a generic controller like this:
.controller('GenericListController', function () {
// Define this
var self = this;
// Define our list
self.list = [];
// Create our page sizes array
self.pageSizes = [10, 20, 50, 100];
// For filtering and sorting the table
self.pageSize = self.pageSizes[0];
self.predicate = 'name';
self.reverse = false;
self.filter = '';
// For deleting
self.delete = function (e, model) {
// Delete the item
service.delete(model.id);
};
});
very simple as you can see.
Now I was using this by injecting it into my controller like this:
.controller('DashboardController', ['GenericListController', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {
// Assign this to a variable
var self = Controller;
}])
In theory everything that is assigned to the GenericListController is now available to the DashboardController. The problem is the line in the generic controller that looks like this:
service.delete(model.id);
Somehow I need to reference my service in the generic controller. I thought that maybe I could create a provider and inject the service reference into the constructor but I am not sure if it being a singleton is an issue, so I need some help.
Is a service / factory / provider a good way to build the GenericListController?
Does a service / factory being a singleton affect anything? If so, can they be created so they are not singletons?
Is there another way to achieve what I am after?
Update 1
So it appears some people are confused....
So if I created a factory that looks like this:
.factory('ListControllerService', function () {
// Default constructor expecting a service
return function (service) {
// Define this
var self = this;
// Define our list
self.list = [];
// Create our page sizes array
self.pageSizes = [10, 20, 50, 100];
// For filtering and sorting the table
self.pageSize = self.pageSizes[0];
self.predicate = 'name';
self.reverse = false;
self.filter = '';
// For deleting
self.delete = function (e, model) {
// Delete the item
service.delete(model.id);
};
};
})
then I create 2 separate controllers that looks like this:
.controller('DashboardController', ['ControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {
// Assign this to a variable
var self = new Controller(service);
self.list = centers;
}])
.controller('CompanyController', ['ControllerService', 'CompanyService', 'ArrayService', 'companies', function (Controller, service, arrayService, centers) {
// Assign this to a variable
var self = new Controller(service);
self.list = companies;
}])
Hopefully you can see that the service I am injecting into the ListControllerService is different for each controller. The only caveat I have with my example is that each "service" must have a delete method (not so difficult because they are all api services).
I hope that explains things better.
The solution I am using on my current project is to write a function that registers a factory.
function CreateMyGenericFactory(factoryName, serviceName)
app.factory(factoryName, [serviceName, function (service){
var GenericListFactory = {
list: [],
pageSizes: [10, 20, 50, 100],
predicate: 'name',
reverse: false,
filter: ''
delete: function(e, model){
service.delete(model.id);
}
}
GenericListFactory.pageSize = GenericListFactory.pageSizes[0];
return GenericListFactory;
}]);
}
Then execute the function in your JS to register a new factory dynamically.
CreateMyGenericFactory('ListFactory', 'ListService');
And use it in your controller.
app.controller('GenericListController', ['ListFactory', function (ListFactory) {
...
console.log(ListFactory.pageSizes.length); // -> 4
ListFactory.delete(e, model);
}];
I also registered the service inside my CreateMyGenericFactory function to further reduce duplication, you may consider doing that as well if each factory has its own service.
The final solution looked like this.
function CreateMyGenericFactory(name)
var factoryName = name + 'Factory'; // e.g. listFactory
var serviceName = name + 'Service'; // e.g. listService
app.factory(factoryName, [serviceName, function (service){
var factory = {
list: [],
pageSizes: [10, 20, 50, 100],
predicate: 'name',
reverse: false,
filter: ''
delete: function(e, model){
service.delete(model.id);
}
}
factory.pageSize = factory.pageSizes[0];
return factory;
}]);
app.service(serviceName, ['$resource', function (resource){
return $resource(Modus[backend] + '/api/'+slug+'s/:id', {
id: '#_id'
});
}]);
}
That way I could register all the Factories and Services I needed without duplicating any code.
CreateMyGenericFactory('user');
// this registered userFactory and userService
Well, it looks like I was nearly there.
I have managed to solve this but I am not sure if it is the best way to do it, but it certainly works.
So my service is very similar to before:
.factory('ListControllerService', function () {
// Default constructor expecting a service
return function (ctrl, service) {
// Define this
var self = ctrl;
// Define our list
self.list = [];
// Create our page sizes array
self.pageSizes = [10, 20, 50, 100];
// For filtering and sorting the table
self.pageSize = self.pageSizes[0];
self.predicate = 'name';
self.reverse = false;
self.filter = '';
// For deleting
self.delete = function (e, model) {
// Delete the item
service.delete(model.id);
};
return self;
};
})
The only thing that changes is that instead of:
self = this;
I now do:
self = ctrl;
ctrl is the controller that is inheriting from this service.
I also return self so that I can bind it to self in the inherited controller.
now my controller looks like this:
.controller('DashboardController', ['ListControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {
// Assign this to a variable
var self = new Controller(this, service);
console.log(this);
console.log(self);
// Assign our centers
self.list = centers;
}])
both console.log output the same which is great.
I am loading in this JSON into my angular app:
http://www.football-data.org/teams/354/fixtures/?callback=JSON_CALLBACK
I would like to only load fixtures that are up-coming i.e only show the fixture details that are later than the present time.
I have a controller as so:
.controller('fixturesController', function($scope, $routeParams, footballdataAPIservice) {
$scope.id = $routeParams.id;
$scope.fixtures = [];
$scope.pageClass = 'page-fixtures';
footballdataAPIservice.getFixtures($scope.id).success(function (response) {
$scope.fixtures = response;
});
});
HTML
<tr ng-repeat="fixture in fixtures.fixtures">
<td>{{$index + 1}}</td>
<td>{{teamName(fixture.awayTeam)}}</td>
Not sure how to do this, especially with the format I have for the time and day: "2015-03-14T15:00:00Z"
Your dates are already in the correct format for a date conversion, so you only need to create a filter yourself.
I'd just create a custom filter like the one I put down here. Adjust it to your needs.
angular.module('yourApp')
.filter('greaterThan', function() {
return function (actualDate, comparisonDate) {
return Date(actualDate) > Date(comparisonDate);
};
});
Then your HTML could look like this:
<tr ng-repeat="fixture in fixtures.fixtures | greaterThan:fixture.date:'2015-03-14T15:00:00Z'">
...
</tr>
App design question. I have a project which has a very large number of highly customized inputs. Each input is implemented as a directive (and Angular has made this an absolute joy to develop).
The inputs save their data upon blur, so there's no form to submit. That's been working great.
Each input has an attribute called "saveable" which drives another directive which is shared by all these input types. the Saveable directive uses a $resource to post data back to the API.
My question is, should this logic be in a directive at all? I initially put it there because I thought I would need the saving logic in multiple controllers, but it turns out they're really happening in the same one. Also, I read somewhere (lost the reference) that the directive is a bad place to put API logic.
Additionally, I need to introduce unit testing for this saving logic soon, and testing controllers seems much more straightforward than testing directives.
Thanks in advance; Angular's documentation may be… iffy… but the folks in the community are mega-rad.
[edit] a non-functional, simplified look at what I'm doing:
<input ng-model="question.value" some-input-type-directive saveable ng-blur="saveModel(question)">
.directive('saveable', ['savingService', function(savingService) {
return {
restrict: 'A',
link: function(scope) {
scope.saveModel = function(question) {
savingService.somethingOrOther.save(
{id: question.id, answer: question.value},
function(response, getResponseHeaders) {
// a bunch of post-processing
}
);
}
}
}
}])
No, I don't think the directive should be calling $http. I would create a service (using the factory in Angular) OR (preferably) a model. When it is in a model, I prefer to use the $resource service to define my model "classes". Then, I abstract the $http/REST code into a nice, active model.
The typical answer for this is that you should use a service for this purpose. Here's some general information about this: http://docs.angularjs.org/guide/dev_guide.services.understanding_services
Here is a plunk with code modeled after your own starting example:
Example code:
var app = angular.module('savingServiceDemo', []);
app.service('savingService', function() {
return {
somethingOrOther: {
save: function(obj, callback) {
console.log('Saved:');
console.dir(obj);
callback(obj, {});
}
}
};
});
app.directive('saveable', ['savingService', function(savingService) {
return {
restrict: 'A',
link: function(scope) {
scope.saveModel = function(question) {
savingService.somethingOrOther.save(
{
id: question.id,
answer: question.value
},
function(response, getResponseHeaders) {
// a bunch of post-processing
}
);
}
}
};
}]);
app.controller('questionController', ['$scope', function($scope) {
$scope.question = {
question: 'What kind of AngularJS object should you create to contain data access or network communication logic?',
id: 1,
value: ''
};
}]);
The relevant HTML markup:
<body ng-controller="questionController">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="saveModel(question)" />
</body>
An alternative using only factory and the existing ngResource service:
However, you could also utilize factory and ngResource in a way that would let you reuse some of the common "saving logic", while still giving you the ability to provide variation for distinct types of objects / data that you wish to save or query. And, this way still results in just a single instantiation of the saver for your specific object type.
Example using MongoLab collections
I've done something like this to make it easier to use MongoLab collections.
Here's a plunk.
The gist of the idea is this snippet:
var dbUrl = "https://api.mongolab.com/api/1/databases/YOURDB/collections";
var apiKey = "YOUR API KEY";
var collections = [
"user",
"question",
"like"
];
for(var i = 0; i < collections.length; i++) {
var collectionName = collections[i];
app.factory(collectionName, ['$resource', function($resource) {
var resourceConstructor = createResource($resource, dbUrl, collectionName, apiKey);
var svc = new resourceConstructor();
// modify behavior if you want to override defaults
return svc;
}]);
}
Notes:
dbUrl and apiKey would be, of course, specific to your own MongoLab info
The array in this case is a group of distinct collections that you want individual ngResource-derived instances of
There is a createResource function defined (which you can see in the plunk and in the code below) that actually handles creating a constructor with an ngResource prototype.
If you wanted, you could modify the svc instance to vary its behavior by collection type
When you blur the input field, this will invoke the dummy consoleLog function and just write some debug info to the console for illustration purposes.
This also prints the number of times the createResource function itself was called, as a way to demonstrate that, even though there are actually two controllers, questionController and questionController2 asking for the same injections, the factories get called only 3 times in total.
Note: updateSafe is a function I like to use with MongoLab that allows you to apply a partial update, basically a PATCH. Otherwise, if you only send a few properties, the entire document will get overwritten with ONLY those properties! No good!
Full code:
HTML:
<body>
<div ng-controller="questionController">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="save(question)" />
</div>
<div ng-controller="questionController2">
<h3>Question<h3>
<h4>{{question.question}}</h4>
Your answer: <input ng-model="question.value" saveable ng-blur="save(question)" />
</div>
</body>
JavaScript:
(function() {
var app = angular.module('savingServiceDemo', ['ngResource']);
var numberOfTimesCreateResourceGetsInvokedShouldStopAt3 = 0;
function createResource(resourceService, resourcePath, resourceName, apiKey) {
numberOfTimesCreateResourceGetsInvokedShouldStopAt3++;
var resource = resourceService(resourcePath + '/' + resourceName + '/:id',
{
apiKey: apiKey
},
{
update:
{
method: 'PUT'
}
}
);
resource.prototype.consoleLog = function (val, cb) {
console.log("The numberOfTimesCreateResourceGetsInvokedShouldStopAt3 counter is at: " + numberOfTimesCreateResourceGetsInvokedShouldStopAt3);
console.log('Logging:');
console.log(val);
console.log('this =');
console.log(this);
if (cb) {
cb();
}
};
resource.prototype.update = function (cb) {
return resource.update({
id: this._id.$oid
},
angular.extend({}, this, {
_id: undefined
}), cb);
};
resource.prototype.updateSafe = function (patch, cb) {
resource.get({id:this._id.$oid}, function(obj) {
for(var prop in patch) {
obj[prop] = patch[prop];
}
obj.update(cb);
});
};
resource.prototype.destroy = function (cb) {
return resource.remove({
id: this._id.$oid
}, cb);
};
return resource;
}
var dbUrl = "https://api.mongolab.com/api/1/databases/YOURDB/collections";
var apiKey = "YOUR API KEY";
var collections = [
"user",
"question",
"like"
];
for(var i = 0; i < collections.length; i++) {
var collectionName = collections[i];
app.factory(collectionName, ['$resource', function($resource) {
var resourceConstructor = createResource($resource, dbUrl, collectionName, apiKey);
var svc = new resourceConstructor();
// modify behavior if you want to override defaults
return svc;
}]);
}
app.controller('questionController', ['$scope', 'user', 'question', 'like',
function($scope, user, question, like) {
$scope.question = {
question: 'What kind of AngularJS object should you create to contain data access or network communication logic?',
id: 1,
value: ''
};
$scope.save = function(obj) {
question.consoleLog(obj, function() {
console.log('And, I got called back');
});
};
}]);
app.controller('questionController2', ['$scope', 'user', 'question', 'like',
function($scope, user, question, like) {
$scope.question = {
question: 'What is the coolest JS framework of them all?',
id: 1,
value: ''
};
$scope.save = function(obj) {
question.consoleLog(obj, function() {
console.log('You better have said AngularJS');
});
};
}]);
})();
In general, things related to the UI belong in a directive, things related to the binding of input and output (either from the user or from the server) belong in a controller, and things related to the business/application logic belong in a service (of some variety). I've found this separation leads to very clean code for my part.
I just give a try to AngularJS. I try to do something quite simple but I'd like to do it the good way.
I got a list of items in a table which displays name and quantity for each item.
I have a form under the table.
When I click on an item name from the table I'd like the given item to be updatable through the form.
I achieve to do thing with scope inheritance as in fiddle http://jsfiddle.net/5cRte/1/
View :
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
</tr>
Controllers :
function ItemListController($scope){
$scope.items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}];
$scope.selectCurrentItem = function(currentItem) {
$scope.currentItem = currentItem;
}
}
function ItemFormController($scope){
$scope.$watch('currentItem', function() {
$scope.item = $scope.currentItem;
});
}
But has I read in some topics, it is not a good practice to couple controllers scopes this way, and preferably I'll wan't to use a service to store variables shared between controllers.
I was able to put a static variable in a service and retrieve it in another controller, but I can't make it updated when clicking on the item from the table, as watch not working on services variable. Have you an hint, for this ?
Thanks in advance
I don't know whether this is optimal but this what I could come up with
angular.module('myApp', []);
angular.module('myApp').factory('myService', function(){
var items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}, {name:'item3', quantity:50}];
var current = {};
return {
getItems: function(){
return items;
},
setCurrentItem: function(item){
current.item = item;
},
removeCurrentItem: function(){
delete current.item;
},
getCurrent: function(){
return current;
}
}
});
function ItemListController($scope, myService){
$scope.items = myService.getItems();
$scope.selectCurrentItem = function(currentItem) {
myService.setCurrentItem(currentItem);
}
}
function ItemFormController($scope, myService){
$scope.current = myService.getCurrent();
}
Demo: Fiddle