Add the value of the td tag to an array when it is selected

I need to store the data from a table into an array, but only if the checkbox next to it is checked. Here's the code snippet:

<table class="table table-bordered table-striped table-condensed flip-content" style="margin-top: 10em;">
<thead class="flip-content">
 <tr>
 <th class="hidden-print">Include</th>
 <th style="text-align: center;">Quantity</th>
                            <th style="text-align: center;" class="hidden-print">Cost(USD)</th>
                            <th style="text-align: center;" class="hidden-print">Markup(%)</th>
                            <th style="text-align: center;" class="hidden-print">Markup Amount</th>
                            <th style="text-align: center;color: #f00;" class="hidden-print">Your Profit(<?php echo $_SESSION['level_markup']; ?>%)</th>
                            <th style="text-align: center;" class="hidden-print">Company Profit</th>
                            <th style="text-align: center;">Price(USD)</th>
                            <th style="text-align: center;">Price Per piece</th>
                            <th style="text-align: center;" class="hidden-print">Actions</th>
                        </tr>
                        </thead>

                        <tbody style="text-align: center;">
                        <?php
                        $x=0;
                        foreach($query_initial as $qurintl)
                        {

                            ?>
                            <tr class="hidden-print">
                             <td class="hidden-print"><input type="checkbox" value="" name="" id="checkbox1"></td>
                                <td> {{ quantity = <?php echo $qurintl['business_quantity']; ?> }} </td>
                                <td class="hidden-print"><input ng-model="basecost_<?php echo $x; ?>" ng-init="basecost_<?php echo $x; ?>=<?php echo $qurintl['business_final_price']; ?>" type="text" </td>
                                <td class="hidden-print"><input ng-model="markup_<?php echo $x; ?>" ng-init="markup_<?php echo $x; ?>=<?php echo $_POST['markupper']; ?>"></td>

                                <td class="hidden-print"> ${{ marukpamount = (basecost_<?php echo $x; ?> * markup_<?php echo $x; ?>) / 100 | number:2 }}</td>

                                <td class="hidden-print" style="color: #f00;"> ${{ yourprofit = (marukpamount * <?php echo $_SESSION['level_markup']; ?>) / 100 | number:2 }}</td>

                                <td class="hidden-print"> ${{ marukpamount - yourprofit | number:2 }}</td>

                                <td> ${{ results = basecost_<?php echo $x; ?> -- (basecost_<?php echo $x; ?> * markup_<?php echo $x; ?>) / 100 | number:0 }}</td>
                                <td>${{ results / quantity  | number:2 }}</td>
                                <td class="hidden-print"><input type="button" class="btn btn-danger" value="-"></td>
                            </tr>
                            <?php
                            $x++;
                        }
                        ?>
                    </tbody>
                    </table>

Answer №1

Combining Angular with PHP may not be the most effective solution for your issue. To improve your approach, consider storing all instances of $qurintl in a JavaScript array and constructing your table using the following method:

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

function MyCtrl($scope) {
  $scope.all = [{
    business_quantity: 3,
    business_final_price: 2,
    markupper: 5
  }, {
    business_quantity: 3,
    business_final_price: 3,
    markupper: 2
  }, {
    business_quantity: 3,
    business_final_price: 5,
    markupper: 4
  }];
  $scope.level_markup = 3;
  $scope.selected = [];
  $scope.actualize = function() {
    $scope.selected = $scope.all.filter(function(data) {
      return data.checked;
    });
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<body ng-app ng-controller="MyCtrl">
  <table class="table table-bordered table-striped table-condensed flip-content" style="margin-top: 10em;">
    <thead class="flip-content">
      <tr>
        <th class="hidden-print">Include</th>
        <th style="text-align: center;">Quantity</th>
        <th style="text-align: center;" class="hidden-print">Cost(USD)</th>
        <th style="text-align: center;" class="hidden-print">Markup(%)</th>
        <th style="text-align: center;" class="hidden-print">Markup Amount</th>
        <th style="text-align: center;color: #f00;" class="hidden-print">Your Profit({{level_markup}}%)</th>
        <th style="text-align: center;" class="hidden-print">Optamark's Profit</th>
        <th style="text-align: center;">Price(USD)</th>
        <th style="text-align: center;">Price Per piece</th>
        <th style="text-align: center;" class="hidden-print">Actions</th>
      </tr>
    </thead>

    <tbody style="text-align: center;">
      <tr ng-repeat="data in all">
        <td class="hidden-print">
          <input ng-click="actualize();" ng-model="data.checked" type="checkbox">
        </td>
        <td>{{data.business_quantity}}</td>
        <td class="hidden-print">
          <input ng-model="data.business_final_price" type="text" />
        </td>
        <td class="hidden-print">
          <input ng-model="data.markupper">
        </td>

        <td class="hidden-print">${{ markupamount = data.business_final_price * data.markupper / 100 | number:2 }}</td>

        <td class="hidden-print" style="color: #f00;">${{ yourprofit = markupamount * level_markup / 100 | number:2 }}</td>

        <td class="hidden-print">${{ marukpamount - yourprofit | number:2 }}</td>
        <td>${{ results = data.business_final_price - (data.business_final_price * data.markupper) / 100 | number:0 }}</td>
        <td>${{ results / data.business_quantity | number:2 }}</td>
        <td class="hidden-print">
          <input type="button" class="btn btn-danger" value="-">
        </td>
      </tr>
    </tbody>

    <div>Selected Items: {{selected}}</div>
  </table>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a basic live data visualization chart

Can anyone help me with fetching data from the database and plotting it into a real-time graph? I found an example here: The JSON structure is as follows: "networks": { "eth0": { "rx_bytes": 5338, "rx_dropped": 0, "rx_err ...

I am facing an issue where the module pattern functions perfectly on JSBin, but fails to work properly

As a backend developer, I typically only write JavaScript when absolutely necessary, and not always in the best way. However, I have decided to turn over a new leaf and start writing more organized code that follows best practices as much as possible. To ...

Clicking will cause my background content to blur

Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal? Here's the current HTML structure: <div class="menu"> <div class=" ...

Requirements detailed in package.json

Suppose we have a client-side application (such as an Ember app). We define the package.json file for our application with its dependencies listed. { name: "my-app", dependencies: { "dep1" : "1.0.0" }, devDependencies: { ...

Monitor form completion status in a specified div in real time

<div class="well"> <div class="panel-title> <span class="fa fa-caret-right" ng-if="!showGeneral"></span> <span class="fa fa-caret-down" ng-if="showGeneral"></span> </div> <label>GENERAL</labe ...

Issue with parent-child communication in React.js causing malfunction

I am facing an issue with maintaining state between two different JavaScript files using React. The parent class, break.js, is defined as follows: export default function AlertDialog(props) { const [demoOpen, setDemoOpen] = React.useState(true); ...

The values are not being properly initialized in the componentDidMount() function

I've been refactoring my code lately and experimenting with using all the lifecycle methods available to me. In an attempt to initialize the state of a component using componentDidMount(), I've encountered some issues. Previously, I used this.pro ...

Tips for handling catch errors in fetch POST requests in React Native

I am facing an issue with handling errors when making a POST request in React Native. I understand that there is a catch block for network connection errors, but how can I handle errors received from the response when the username or password is incorrec ...

Exploring the functionality of Angular's Controller As using Jasmine testing framework

I am a beginner in Jasmine/Angular testing and I'm attempting to test a controller that I have created. The code for the controller is shown below: (function () { 'use strict'; angular .module('App') .controller('Act ...

Hide Table field display in HTML / ASP.NET

I have recently taken over a web application that was developed using ASP.NET. This app generates a table of query results from a database, with all fields appearing as text except for the "Url" column which is displayed as a hyperlink (see code below). If ...

Is there a convenient HTML parser that is compatible with Nativescript?

I have tested various libraries like Jquery, Parse5, and JsDom, but unfortunately they are not compatible with nativescript. Jquery relies on the DOM, while Parse5 and JsDom require Node.js which is currently not supported by nativescript. I am in need of ...

Exploring the powerful trio of Node.js, MySQL, and asynchronous iterative functions

Currently grappling with an iterative function in nodejs. I'm traversing through an object and checking for any attached sub-objects (imagine a star having a planet with a moon that has an orbital station with a ship). The aim is to construct an arr ...

Newly included JavaScript file displays on view page, but triggers a 404 error when attempting to open

Once I implemented the following code in the child theme's function.php file: add_action('wp_enqueue_scripts', 'js_files'); function js_files() { wp_register_script('ajax_call_mkto', get_template_directory_uri() . ' ...

Experience a unique full-screen video background on page load with this innovative JavaScript feature! Visit the included JS

Looking to enhance my website by displaying a random fullscreen background video selected from a folder of videos that I will manage. The goal is to steadily increase the number of videos in the folder (e.g., bg1.mp4, bg2.mp4, etc...) and have the code aut ...

Retrieve all documents from the service and controller by utilizing pouchdb

Having trouble retrieving data from my service and controller, I am now looking to incorporate CRUD functionality into my web applications. Below is the code for my service: application.service('Arrears', [ function() { var db = new PouchDB ...

What steps are needed to craft a customized greeting on discord using the latest nodejs update?

I am facing an issue where the following code is not sending anything: client.on("guildMemberAdd", (member) => { const welcomeMessage = "Please give a warm welcome to <@${member.id}> <a:pepesimp:881812231208181790> as th ...

Using Google Apps Script to input data into the next available row

Utilizing Google Apps Script, I am retrieving data from another spreadsheet and storing it daily in a sheet named "DATABASE". Although my current solution is basic, it keeps overwriting existing data. I wish to enhance the script to copy data from the imp ...

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

The value of $ViewValue is being neglected in the Element type directive

I have developed a straightforward directive that utilizes a formatter but it seems to be failing to update the input when used either as an element or as an attribute of a div. JSBIN: http://jsbin.com/rifaxuvihu/edit?html,js,output angular.module(&a ...

jQuery Error: Unexpected Internal Server Issue

I have a simple login page created in asp.net, but I'm facing an issue with jQuery not working. I keep getting this error repeatedly and need assistance in solving it. Here is the HTML markup: <html> <body> <form id="form1" r ...