AngularJS and Laravel Foreach

Question

I do have a problem with using Angular with Laravel's foreach loop, i tried to be as detailed as possible :)

<div style="padding:15px;" id="table-scroll" ng-app>
    <table class="table table-responsive tblProducts" id="tblProducts">
      <thead>
        <tr>
          <th>Description</th>
          <th>Prices</th>
          <th></th>
          <th></th>
          <th>Action</th>
        </tr>
      </thead>                                  
      <tbody>
        //foreach loop here
      </tbody>
    </table>
</div>

this is my foreach loop

@foreach($products as $product)

{{ $product->product_description }}
product_price }}" ng-model="price">

@{{price*qty}}
@endforeach

Problem:

-When I use "ng-model" the prices/quantity are not displayed, but when i use "ng-bind" the prices/quantity are displayed but the subtotal column displays NaN (i have no idea why).

Flow:

-Each row of that table displays a list of grocery items, when the checkbox is clicked, it means that the item is selected and transferred to another table for calculating the grandtotal.

Reference: https://ibb.co/hCddLv (snap from list of grocery items) https://ibb.co/e0jk0v (when that product is transferred, this happens) *im using "ng-bind" to display the price and quantity...

Thanks for the answer in advance guys...

I have updated this with my controller code in laravel

public function create() {
$rooms = Room::where('status','=',0)->orderBy('room_length_of_stay')->get();

    $products = DB::table('classifications')
        ->join('products', 'classifications.id', '=', 'products.classification_id')
        ->select('classifications.*', 'products.*')
        ->get();


    //$scope.products = $products;
    return View::make('frontdesk.transactions.create', ['rooms' => $rooms, 'products'=>$products]);
}

shaunhusain · Accepted Answer · 2017-06-04 18:18:09Z

1

ng-model works by using a property on the scope to read/write a value as an input changes so you can't just assign it some value hence the problem. Ideally I only use Angular for the front end and template handling and would do the looping with an ng-repeat over an array that is retrieved in JS from the backend (could be laravel based but would keep it just serving JSON data not doing anything with the view, lumen is good for this). In the short term you can just set the value attribute on the input that would be the most direct way to put your data into the form that may not work with ng-model though (assuming you pointed that at some JS property) since it's expected the ng-model will be used for reading/writing the value.

answered Jun 4, 2017 at 18:18

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alan Torres · Accepted Answer · 2017-06-04 21:08:37Z

0

Instead of using the foreach in blade use a ng-repeat directive. Get the data in the foreach in a json and iterate it in the template.

Before the render of the angular controller make a script:

<script>
  var products = "{{ json_encode($products) }}";
</script>

Then in the controller store it as:

$scope.products = products;

Then iterate it:

<p ng-repeat="product in products">
  @{{ product.product_description }}
  @{{ product.price*product.qty}} 
</p>

answered Jun 4, 2017 at 21:08

Alan Torres

12514 bronze badges

11 Comments

Dennis43 Over a year ago

"$scope.products = $products;" in my Laravel Controller ended in an error,

Alan Torres Over a year ago

Delete the $ in the assignation to the scope. Check how I wrote it

Dennis43 Over a year ago

view table - this is my table where i incorporate the data (updated)

Alan Torres Over a year ago

Try assign the products var outside the controller file. Do it in the view before the call to the controller file. Make a console log before the json encode to see if the variable has content

Dennis43 Over a year ago

when i try to put it in console it says undefined, i tried it in another view but no data

|

Collectives™ on Stack Overflow

AngularJS and Laravel Foreach

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related