0

I am trying to learn creating forms in vf pages using angular js. Below is the code i am trying to write -

There are errors which i am getting in console - 

 $scope.contactwraplist = [ContactWrapper:[c=Contact:{}, contactEmails=(ContactEmail:[c1=Contact:{}, wrapperIdContactEmail=153f34a5-f4f2-c841-266e-02a0d10551ff]), wrapperId=c18446c2-c30e-14f4-1801-fc9b2ad8dd14]]

Uncaught SyntaxError: Unexpected token :

Cannot read property 'generateUrl' of undefined

Vf page - 

<apex:page standardController="Account" extensions="accountcontactwrapperclass" showHeader="false">
        <head>
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js">
            </script>
        </head>
        <script>

            var App = angular.module('myApp', []);

            App.controller('myctrl', function ($scope) {   

                $scope.contactwraplist = {!contactWrapperlist}
            });
            </script>
            <body ng-app="myApp" class="container" ng-controller="myctrl">
                <table class="table table-bordered">
                    <tr>
                        <th>LastName</th>
                    </tr>
                    <tr ng-repeat="contact in contactwraplist | filter:query">          
                        <td> <input type="text" required="true" name="LastName" ng-model="contact.c.LastName"/></td>
                    </tr>
                </table>
                <input type="button" ng-click="SaveAll()" value="Save"/>
            </body>
</apex:page>

Apex Class - 

public class accountcontactwrapperclass {

    public Account acc {get;set;}
    public List<ContactWrapper> contactWrapperlist {get;set;}
    public String wrapperId {get; set;}

    public accountcontactwrapperclass (ApexPages.StandardController controller){

        contactWrapperlist = new List<ContactWrapper>(); 
    }

    public class ContactWrapper{
        public Contact c {get;set;}
        public string wrapperId {get;set;}
        public List<ContactEmail> contactEmails {get;set;}
        public ContactWrapper(){
            Blob b = Crypto.GenerateAESKey(128);
            String h = EncodingUtil.ConvertTohex(b);
            wrapperId = h.SubString(0,8)+ '-' + h.SubString(8,12) + '-' + h.SubString(12,16) + '-' + h.SubString(16,20) + '-' + h.substring(20);
          contactEmails = new List<ContactEmail>();
            c = new Contact();
        }

    }

}
Improve this question

2 Answers 2

Reset to default
2

I have found it easier to use JSON. You can do something like the following in your Apex controller:

String myWrappersJSON { get; private set; }

// myWrappersJSON = JSON.serialize(contactWrapperList);

And then in your Javascript:

var myWrappers = JSON.parse("{!myWrappersJSON}");
Improve this answer
2

If you want or need to work with AngularJS (or any other JS framework) I would suggest you to use Visualforce Remoting instead. With this approach you will have to manipulate the state of your data in Angular, but you'll be able to post it to the platform in a much easier way using JSON.

To call a method on your page using VFRemoting, you do something like this:

Visualforce.remoting.Manager.invokeAction(
  '{!$RemoteAction.APEXCLASS.APEXMETHOD}',
  data,
  function (result, event) {
    if (event.statusCode == 200) {
      var response = JSON.parse(result)
      // parse the response from the server here
      // and do what you need to do ;)
    }
    $scope.$apply()
  }, { escape : false })

If you do it this way remember to use Angular's $scope.$apply() to force it to rerender when your call (because the call itself is async, but the rendering by Angular is synchronous).

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .