Multiple dependent controllers/directives on a single page? - angularjs

I want to display something like this in a single page. The complication is that this data comes from 4 different sources.
City One
Property One
Property Two
Property Three A
Property Three B
Property Three C
City Two
Property One
Property Two
Property Three A
Property Three B
Property Three C
City Three
Property One
Property Two
Property Three A
Property Three B
Property Three C
City - comes from JSON A, which returns a simple array of n objects containing name and id.
Property One comes from JSON B (using City.id as a parameter in the URL), returning one set of objects specific to City.id.
Property Two comes from JSON C (using City.id as a parameter in the URL), returning one set of objects specific to City.id.
Property Three A/B/C comes from JSON D (using an key field returned in Property Two), returning one set of objects specific to a particular property key specified in Property Two.
Is this even doable? I'm aware that this requires 3n+1 semi-synchronous JSON calls. At this point I don't know if I should be looking for help on controllers or directives or some kind of crazy routing or what.
I'm a total noob at Angular (I come from an ASP.NET MVC background) and I can't wrap my ahead around this. I've been trying to follow John Papa's Style Guide, so there isn't a $scope to be found anywhere in my code, which is severely limiting my understanding of some pages I've looked up to solve this.

Related

How can I bind a directive to a column cell in angular-ui-grid?

First, this is what I'm trying to do: I am using ngResource to grab an array of data from an API and setting the ui-grid's data to the array. One of the columns is an ID that has no meaning to the user. I would like to use another API to look up the meaning of that ID and get the human-friendly result of that. Before using ui-grid, I was simply using a directive that took that ID and set the element's text as the return result from the secondary API.
I know that it's possible to bind a column dynamically to data in that row's object, having looked at: http://ui-grid.info/docs/#/tutorial/106_binding, but it appears that this is limited to binding to the data in $scope or in the grid's data (such as in the example). I also see that there is a cellClass options method which allows conditional setting of the cell's class. However, I do not see any good options for intercepting the element in the cell and replacing it with a result of my choosing.
I am wondering what the best way to do this is. I've tried using ngResource's transformResponse but the array is too large to make a blocking event. As well, I've tried to inject the html for the directive into the field's return function, i.e. field: transformToHtml() but only the raw string shows, not the rendered html.

ng-repeat convert resource objects to simple objects

Iam getting my data with help of the Angular's $resource service as array. Each element of that array is an Resource-Object. So i can use methods like $save and $update of these Objects. In a view i represent my array with the help of the ng-repeat directive like:
<div ng-repeat="appointment in object.appointments" ng-click="editAppointment(appointment)">
And here i get in trouble. The appointment-Object i get in the editAppointment-Method is a simple Object. No Resource Object anymore. So i cant use the helpfull methods like i mentioned above.
$scope.editAppointment= function(appointment){
console.log(appointment); // > Object
console.log(object.appointments); // > Array of Resource
}
Have somebody noticed that problem too? May its a bug, but i cant imagine that.
Assuming your resource class is called Appointment, you should just be able to do:
$scope.editAppointment= function(appointment){
new Appointment(appointment).save();
}
Presumably your Appointment resource looks something like the following (i.e. it correctly maps some sort of id property from existing objects to the URL parameters):
var Appointment = $resource('/appointment/:appointmentId', {appointmentId:'#id'});
This would be the case if your appointment objects (i.e. the underlying JSON objects handled by your API) have an ID property called id. If it's called something else (or if there are multiple path variables in your URL) you'll just need to change the second argument to map all of the properties of the objects being saved (the values starting with '#') to the URL path variables (the things starting with ':' in your URL).
See where they save a new card in the credit card example here: http://docs.angularjs.org/api/ngResource.$resource. The fact that they're dealing with a totally new object and that you're trying to save an existing one is irrelevant. Angular doesn't know the difference.

Nested stores in Extjs4

I was just wondering if we can have a nested stores, similar to nested models in Extjs4.
i am thinking this just because, i have a 10 drop downs and 10 grids which uses the same model. hence i have 10 stores for drop down and 10 stores for grid.
among 10 drop down stores, 2 dropdown will make a ajax call to retrieve the data from server and other stores will use the response data of above 2 and load their independent store using the response. similar applies to grid also.
So is this the right approach.? and any disadvantage of having multiple stores(about 20 :O) on the same page.
Kindly suggest. :)
Small Update to Clear my question.
i am not referring as nested stores because it is reffering to same model. in Extjs4 we can have a single ABCModel.js and define many components which exted Model. Hence to clear my question again, I have 10 stores(ie.,, 10 .js files) and 10 grids (again 10.js files for stores). So is this the right approach or can we push all these under single .js file.
Thanks
Punith
It's not really "nested" stores... The fact that they are using same model has nothing to do with nested.
I would not worry about number of stores on the page more then I would worry about number of grids for example. Stores in your case would just play role of arrays for data.
Load two (or four) stores from the server, and then create local copies for other controls. You won't be able to use same store object for different controls if they show different set of data. What you need to do is to filter one store and create a clone of result in the other store object. And since you basically need only one or two fields in these local stores - you might want to create a simple model ([id, name] or something like that).

Save error: Initial term of field expression must be a concrete SObject: MAP<String,AcctId__c>

I'm trying to get over a limitation in Salesforce where Lead objects can't have related lists that convert with the Lead over to Opportunity, Contact and Account. I have set up 4 objects of type Lookup Relationship, and created a dummy record in each.
I want to use Custom Settings to store the id of each of these dummy records, so that when the Lead converts, any custom objects can also convert to objects with Master/Detail relationships on the respective standard objects.
My trigger on Lead(after update) tries to create a Map of the Custom Settings:
Map cs = AcctId__c.getAll();
AcctId__c is the Custom Setting api name. Compile time is giving me the above message.
Now, I copied this code directly from the Salesforce documentation. What am I forgetting?
I believe that you must include the actual map definition <String,AcctId__c> after the word Map.
Check out this page.
http://www.salesforce.com/us/developer/docs/apexcode/Content/langCon_apex_collections_maps.htm

Silverlight 4 Domain Data Source Filter Descriptor on nested property

I have an object model where I'm checking a filter value of nested child property e.g.
Order -> Customer
And Customer has a property e.g. Name = "Joe Bloggs"
My domain service returns IQueryable<Order>. My domain data source is bound to this (and in turn my Grid is bound to the domain data source), and I have a filter descriptor set as something like this:
<ria:FilterDescriptor Operator="Contains" Value="{Binding Text, ElementName=txtCustomerName}" PropertyPath="Customer.Name" IgnoredValue=""/>
This all works great, except the relationship between Order and Customer is optional i.e. an Order may not have a Customer and therefore the Customer navigation property may be null. In such a situation, when running the query, the domain data source throws a null reference exception - presumably because it's trying to traverse the Customer and get the Name value when of course the Customer is null.
Has anyone come up with a good solution to this problem?
I ended up solving this by using the MVVM equivalent to the DomainDataSource - the DomainCollectionView and its associated classes. With this, you have more control of your query composition and I therefore made my query do a null check on the Customer property before evaluation the Name property on it.

Resources