What are the best practices for incorporating Javascript into a page with the type "text/ng-template"?

Question

What are the best practices for incorporating Javascript into a page with the type "text/ng-template"?

I am currently working with the following code:

<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 would like the content of {{ detail }} to be parsed and displayed as shown in this image: enter link description here

However, I have encountered an issue where JavaScript is not functioning within "

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

". How can I resolve this? Thank you.

javascript angularjs

Answer 1

Answer №1

To enhance your template, consider incorporating the following HTML table:

<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 dynamically generates table rows for each item within the obj variable. Remember to define $scope.obj in your controller as necessary for proper functionality. Simply declaring var obj may not suffice, based on my experience.

Answer 2

To enhance your template, consider incorporating the following HTML table:

<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 dynamically generates table rows for each item within the obj variable. Remember to define $scope.obj in your controller as necessary for proper functionality. Simply declaring var obj may not suffice, based on my experience.

Answer 3

Answer №2

Trying this method will be ineffective. It would be better to utilize Angular's ng-repeat within the template in order to create your table.

Answer 4

Trying this method will be ineffective. It would be better to utilize Angular's ng-repeat within the template in order to create your table.

Answer 5

Answer №3

If you are utilizing the ui-bootstrap-modal (text/ng-template), then you have the ability to pass the desired object into the controller of your modal by utilizing the resolve feature.

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;
                }
            }

        });

You can easily utilize the passed object in an angular way within your modal's HTML.

<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 opted for the controllerAs syntax in the modal.

Answer 6

If you are utilizing the ui-bootstrap-modal (text/ng-template), then you have the ability to pass the desired object into the controller of your modal by utilizing the resolve feature.

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;
                }
            }

        });

You can easily utilize the passed object in an angular way within your modal's HTML.

<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 opted for the controllerAs syntax in the modal.

What are the best practices for incorporating Javascript into a page with the type "text/ng-template"?

Answer №1

Answer №2

Answer №3

Similar questions

Nullify the unfulfilled fetch call

Encountered an issue while attempting to import a package in ES6: 'Module specifier "vue" could not be resolved'

Bug Found in AngularJS v1.3.15: Text Color Rendering Glitch on Page Load with WebKit

Attempting to iterate over elements within an object labeled as strIngredients 1-15

The NodeJS nedb function seems to be ignoring the await keyword

How can we determine the source website from which we were redirected?

One of the great features of Next.js is its ability to easily change

Fixing issues with Ajax calls in Internet Explorer versions 7 and 8

Need help triggering Ajax code upon clicking a link?

Encountering difficulties in the installation of a package within Next JS

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

Angular: Executing a function within the controller's scope and subsequently transferring it to a directive

The TypeScript compiler is generating node_modules and type declaration files in opposition to the guidelines outlined in the tsconfig.json file

What can be used as an alternative to the onkeypress event for touch events?

Performing an Ajax MySQL query utilizing the text from a link as a reference, across a page

Encounter a 401 error code while attempting to fetch data from CouchDB using an AJAX request

When using Laravel with jQuery Ajax, the search for the file address is unsuccessful

D3 Chart: What is the best way to insert images into a node?

What are the best circumstances for applying JavaScript in ASP.NET?

Unresolved promise: Internal server issue