How to use javascript inside a page with type=“text/ng-template”?

I have code like this:

<script id="templates/orderdetails.html" type="text/ng-template">

    <ion-view view-title="OrderDetails">

        <ion-content class="padding">

            <p>Here I want to display order details...</p>

            {{ detail }}

<script type="text/javascript">
            var obj = JSON.parse( {{ detail }} );

            document.write('<table>');
            document.write('<thead>');
            document.write('<tr>');
            document.write('<th>??</th><th>??</th><th>??</th><th>??</th>');
            document.write('</tr>');
            document.write('</thead>');
            document.write('<tbody>');

            document.write('</tbody>');
            document.write('</table>');

            for(id in obj) {
                document.write(obj[id]["name"]);
                document.write(" ");
                document.write(obj[id]["price"]);
                document.write(" ");
                document.write(obj[id]["num"]);
                document.write(" ");
                document.write(obj[id]["total"]);
                document.write("<br>");
            }
</script>
            <p>
                <a class="button icon ion-home" href="#/tab/home"> Home</a>
            </p>

</ion-content>
</ion-view>

</script>

I want {{ detail }} be parsed and displayed looks like this: enter link description here

But I found javascript not working inside "<script id="templates/orderdetails.html" type="text/ng-template">", How can I do that? Thanks.

Answers:

Answer

You can better add the following table-html to your template like this:

<table>
  <thead>
    <tr>
      <th>??</th><th>??</th><th>??</th><th>??</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="id in obj">
       <td>{{name}}</td>
       <td>{{price}}</td>
       <td>{{num}}</td>
       <td>{{total}}</td>
    </tr>
  </tbody>
</table>

Ng-Repeat will render the necesarry table rows for every item in your obj variable. After that you will need to define $scope.obj in your controller since your angular app will look for that. I think that just definig var obj is not working, but I have never used it that way.

Answer

This won't work. Instead just use Angular ng-repeat inside the template to generate your table.

Answer

I assumed you are using the ui-bootstrap-modal (text/ng-template) thus you are able to pass the object you want to use into the controller of your modal by using the resolve functionality.

var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'xml-feed.html',
            controller: function($modalInstance,  detail) { 
                this.detail = detail;

                this.close= function () {
                    $modalInstance.close();
                }
            },
            controllerAs: 'myModal',
            size: 'lg',
            resolve: {
                detail: function () {
                    //here you will need to return a reference
                    //I assumed the modal is opened in a controller
                    //that already has the detail object on its scope
                   return $scope.detail;
                }
            }

        });

And in your modals HTML you can simple use the object in an angular way.

<table>
  <thead>
    <tr>
      <th>??</th><th>??</th><th>??</th><th>??</th>
    </tr>
  </thead>
  <tbody>
        <tr><td>{{myModal.detail}}</td><tr> //do what you need with this object
  </tbody>
</table>

P.S. I used the controllerAs syntax in the modal.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.