Angularjs : How to show contents of ng-repeat, when using Laravel?

Question

What I've been trying to do is to show the contents of ng-repeat. The problem is that I can't use the double curly braces, {{ value }}.

In case you haven't tried this, let me explain that this expression, {{ value }}, is going to find a variable named $value if you use Laravel 5.2. Apparently, using double curly braces, {{ value }}, won't refer to the content of ng-repeat, even if there is an expression like the following one.

<tr ng-repeat="value in values"></tr>

So, I usually rely on ng-bind, but ng-bind doesn't seem to work with ng-repeat as it usually does.

My code looks like this.

<div ng-app="angularApp" ng-controller="TableController as tc">
    <input type="text" ng-model="searchBox">
    <table style="width:100%;">
        <tr>
            <th>Student ID</th>
            <th>Name</th>
        </tr>
        <tr ng-repeat="student in students | filter:searchBox">
        {{ student.name }}//This causes an error, indicating "Use of undefined constant student"
            <td ng-bind="student.student_id"></td>
            <td ng-bind="student.name"></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    angular.module('angularApp')
    .controller('TableController', function(){
        this.data = {
            students: [
            @foreach($students as $student)
            "{{ $student }}",
            @endforeach
            ]
        };
    });
</script>

$students is an array, containing SQL objects called student. This comes from a Laravel's controller function.

Do you see anything I'm doing wrong? Any advice will be appreciated!

You need to change the delimiter of angular JS

aldrin27
– aldrin27

2016-03-15 03:15:46 +00:00
Commented Mar 15, 2016 at 3:15 — aldrin27
– aldrin27, Commented Mar 15, 2016 at 3:15

aldrin27 · Accepted Answer · 2016-03-15 04:56:05Z

2

In your script:

<script type="text/javascript">
angular.module('angularApp', [], function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
   $interpolateProvider.endSymbol(']]');
});
angular.controller('TableController', function(){
    this.data = {
        students: $students
    };
});

In your blade:

Change {{ student.name }} to [[ student.name ]]

edited Mar 15, 2016 at 4:56

answered Mar 15, 2016 at 3:19

aldrin27

3,4184 gold badges31 silver badges44 bronze badges

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

16 Comments

Hiroki Over a year ago

Thank you for your suggestion. Sadly, however, the <td>[[ student.student_id ]]</td> part doesn't appear. This part can be seen on the page source, though. Apparently <tr ng-repeat="student in students"> tag itself is not working.

aldrin27 Over a year ago

is the script on your blade? try {!! $student !!}

Hiroki Over a year ago

Yes. All of the coding is on the same blade.php file.

aldrin27 Over a year ago

try to console.log("$students")

aldrin27 Over a year ago

is $students a json file?

|

Alan Perez · Accepted Answer · 2016-03-15 04:11:55Z

1

You can add an @ before it

https://laravel.com/docs/5.2/blade#displaying-data

Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the @ symbol to inform the Blade rendering engine an expression should remain untouched. For example:

Laravel

Hello, @{{ name }}.

edited Mar 15, 2016 at 4:11

answered Mar 15, 2016 at 3:27

Alan Perez

1864 bronze badges

9 Comments

Hiroki Over a year ago

Thank you for your suggestion. {{student.student_id }} can be seen. However, it doesn't reflect the variable. This means that I see {{student.student_id }} expression on the screen, instead of the value of {{student.student_id }}.

Alan Perez Over a year ago

Did you change the symbol back to {{}} from aldrin27 suggestion.

Hiroki Over a year ago

I changed the symbol from {{ }} to [[ ]] before I tried aldrin27's suggestion. After that, I changed back the symbols from [[ ]] to {{ }}. Then, I tried your suggestion.

Alan Perez Over a year ago

Try changing the "{{ $student }}" in students array to {{ $student->toArray() }} and {{ student.name }} to @{{ student.name }}

Hiroki Over a year ago

Thank you for your reply. I sincerely appreciate your help. Unfortunately, this caused another error, htmlentities() expects parameter 1 to be string, array given. Actually {{ $student }} is fine. When I try Laravel's @foreach with {{$student}}, the contents of each $student can be rendered properly.

|

Collectives™ on Stack Overflow

Angularjs : How to show contents of ng-repeat, when using Laravel?

2 Answers 2

16 Comments

Laravel

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Laravel

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related