[SalesForce] Using apex:Component within Angular Repeat

I have done a VF Page which pulls data through RemoteAction Methods and display it.

On clicking the row ,jumptron should display its related information whose logic resides in a apex:component.

All i have to do is to pass the record id to the apex:component ,which would query some related object and display the data in apex:dataTable

Eg:At the primitive level this is what am trying to

<ul class="list-group"> 
    <li class="list-group-item" ng-repeat-start="x in data">
        {{x.Name}}
    </li>
     <div ng-repeat-end="end">  
        <div class="jumbotron">
            <div class="row">
                <div class="panel-body">
                        <c:RelatedTask value="{{x.Id}}"/>
                </div>
            </div>
        </div>
    </div>  
</ul>

RelatedTaskComponent:

<apex:component controller="TestCtrl">
    <apex:attribute name="value" description="This is the value for the component." type="String"  assignTo="{!parentId}"/>

    <apex:dataTable value="Collection">
        .....   //some data 
    </apex:dataTable>
</apex:component>

using controller:

public class TestCtrl{
  public String parentId{
    get;
    set{
       this.parentId = value; 
      System.debug('this.parentId:::::::'+this.parentId); /
    }
  }

  public TestCtrl(){
     //logic to query the related data passed on the parentid received from ng-repeat
  }
}

I tried to pull the data based on the parentid from the repeat in the components controller ,but am getting parentid field as "{{x.Id}}" but not the evaluated angular expression.

Best Answer

The Visualforce page is turned into HTML on the server and that HTML is sent to the browser. Angular executes in the browser and modifies the HTML in the browser. For example, ng-repeat causes duplicates of the element it is located on to be made.

At the time when c:RelatedTask executes on the server its argument is just the string "{{x.Id}}" because Angular has not (and cannot) run at that time.

So you need to redesign the page to either make the repeat a Visualforce one so it executes on the server or to get all the data into the page as JSON (as part of the Angular model) so the Angular repeat can be used.

Generally simplest to stick to all server-side rendering or all client-side rendering in an area of the UI.

For your case, you could add another RemoteAction to fetch the data and render it when the row is clicked via your Angular controller.

Related Solutions

[SalesForce] Nested Tables – How to Add A Child Row Dynamically

If you can post your code it would be helpful.

Here are my assumptions and solution

Lets consider you are using List<record> lstrec and iterating this list to create a row in your Visualforce page.
On click of button "Add Schedule" call method addrow() in controller.
In this method create new instance of record/object, Visualforce will automatically add row.

As per your code, you need to have addRow() method something like this -

public void addRow(){ 
    thisOppProductId = ApexPages.currentPage().getParameters().get('rIndex');
    Opportunity_Product__c oppc= [Select Id,
                                  Name,
                                  Product__c,
                                  Sales_Price__c,
                                  ServiceDate__c,
                                  Start_Period__c,
                                  Number_of_Installments__c 
                                  from Opportunity_Product__c where id =: thisOppProductId];
    if(oliSchEdit != null)
    {
        oliSchEdit.add(new Opportunity_Product_Schedule__c (Opportunity_Product__c= oppc.Id,Amount__c=0.0,Product__c = oppc.Product__c,Start_Period__c =oppc.Start_Period__c));
    } 
}

I am not sure what is meaning of parameter rIndex , just copied it from your code.

[SalesForce] New to Using Remote Action with Angular JS

Short answer: you need to use $scope.$apply to force angularJs to reload the elements. So your code should look like this:

$scope.ContactData =  Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.SampleRemoteActionWithAngularJS.getContacts}',
         function(result, event) 
         {
            $scope.$apply(function() {
              console.log(result);
              $scope.ctdata = result;
              mytestvar = result;
            });
         }); 
      }]);

The longer answer: AngularJS watches all the elements in the watchList. It gets updated every time it notices anything has changed in the watchList. It knows the things changed by subscribing itself to all the regular angular methods so usually it updates automatically. Even during ajax callback methods, if you use the angular way of doing it, it is still fine.

But the exception is none-angular methods. Javascript remoting is definitely one example. So you need to manually notify angularJs to reRender the page in the callBack function. In this case, use $scope.$apply.

Note: AngularJS might seem to be easy in the first instance, but it is not as easy when you try to master it... It is like marriage. If you are just into the template engine and small stuffs like sorting, filtering, etc.(Like I did) Consider using a template engine and a lightweight sorting js library, not the whole monolithic AngularJS.

Best Answer

Related Solutions

[SalesForce] Nested Tables – How to Add A Child Row Dynamically

[SalesForce] New to Using Remote Action with Angular JS

Related Topic