Incorporate AngularJS {{expression}} into ng-repeat by utilizing a separate array

Question

Incorporate AngularJS {{expression}} into ng-repeat by utilizing a separate array

After completely rebuilding my website (which was originally hacked together with Wordpress), I decided to utilize Laravel and AngularJS. The transition has been quite challenging, but I'm almost there, except for one issue.

On my website, I have 'schemes' (or courses) that consist of 'units', which in turn contain 'lessons'. Retrieving this data using Eloquent has been smooth, and I am able to retrieve valid JSON in the following example structure...

[
{
    "id": "1", 
    "title": "Sports",
    "description": "This is a Sports course!",
    "units": [
        {
            "id": "1",
            "title": "Tennis",
            "lessons": [
                {
                    "id": "6",
                    "title": "Serving"
                },
                {
                    "id": "7",
                    "title": "Hitting the ball with top-spin"
                }
            ]
        },
        {
            "id": "2",
            "title": "Athletics",
            "lessons": [
                {
                    "id": "1",
                    "title": "Long Jump"
                },
                {
                    "id": "2",
                    "title": "Hurdling Technique"
                }
            ]
        },
        {
            "id": "4",
            "title": "Golf",
            "lessons": [
                {
                    "id": "4",
                    "title": "Pitching"
                },
                {
                    "id": "5",
                    "title": "Putting"
                }
            ]
        }
    ]
}
....
]

Additionally, I have a simple array that contains completed lesson ids for a specific user...

[2, 6, 8, 9]

Within my view, I am using nested ng-repeat loops as shown below...

...
<div ng-controller="SchemesController">
<div ng-repeat="scheme in schemes">
    <h1>{{scheme.title}}</h1>
    <div ng-repeat="unit in scheme.units">
        <h3>{{unit.title}}</h3>
        <div ng-repeat="lesson in unit.lessons">
            <div>{{lesson.title}}: {{status}}</div>
        </div>
    </div>
</div>
</div><!--[end of ng-controller="SchemesController"]-->
....

The SchemesController is quite simple and looks like this...

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

   app.controller('SchemesController', function($scope){
    $scope.schemes=jsonData;
   });

The challenge I'm facing is populating the {{status}} field to indicate 'Complete' or 'Incomplete'. I have tried modifying the original array but didn't make much progress. I even explored using underscore.js but still couldn't figure it out.

Is there a way to achieve this, possibly by using underscore.js or by creating and calling a JavaScript function?

Any assistance or guidance on this matter would be greatly appreciated. As a school teacher, I find programming and web design to be a fun use of my spare time, so I apologize if my question seems trivial. Thank you in advance!

By the way, if anyone has a better 'title' suggestion for this question, please feel free to share.

javascript arrays json angularjs laravel

Answer 1

Answer №1

Assuming there is no need to persist the status back to the database...

The issue lies here:

<div>{{lesson.title}}: {{status}}</div>

It's unnecessary to store the status in the data model since it's only used for display purposes.

Imagine your array of completed lessons is set up like this:

$scope.completedLessons = [1, 2, 3, 4, 5] // Or however you'd assign it

You should create a function in your scope like this:

$scope.isLessonCompleted = function(lessonId) {
  return $scope.completedLessons.indexOf(lessonId) > -1;
};

Then update the html as follows:

<div>{{lesson.title}}: {{isLessonCompleted(lesson.id) && 'Complete' || 'Incomplete'}}</div>

Answer 2

Assuming there is no need to persist the status back to the database...

The issue lies here:

<div>{{lesson.title}}: {{status}}</div>

It's unnecessary to store the status in the data model since it's only used for display purposes.

Imagine your array of completed lessons is set up like this:

$scope.completedLessons = [1, 2, 3, 4, 5] // Or however you'd assign it

You should create a function in your scope like this:

$scope.isLessonCompleted = function(lessonId) {
  return $scope.completedLessons.indexOf(lessonId) > -1;
};

Then update the html as follows:

<div>{{lesson.title}}: {{isLessonCompleted(lesson.id) && 'Complete' || 'Incomplete'}}</div>

Answer 3

Answer №2

In the scenario where lessons also function as a model and each lesson requires a status, which is not a predefined column in your database table but is a value you need to determine programmatically, you can create a custom model accessor. To do this, simply insert the following code snippet into your models/Lesson.php:

// Include custom accessor attributes
protected $appends = ['status'];

public function getStatusAttribute() {
    // Implement your logic here
    return 'Complete';
}

By utilizing this approach, the Eloquent ORM will retrieve the data along with the added status attribute within the object. Consequently, you can easily access it using $lesson->status in PHP or lesson.status in JavaScript.

To delve deeper into this topic, refer to the official Laravel documentation on accessors and mutators

Answer 4

In the scenario where lessons also function as a model and each lesson requires a status, which is not a predefined column in your database table but is a value you need to determine programmatically, you can create a custom model accessor. To do this, simply insert the following code snippet into your models/Lesson.php:

// Include custom accessor attributes
protected $appends = ['status'];

public function getStatusAttribute() {
    // Implement your logic here
    return 'Complete';
}

By utilizing this approach, the Eloquent ORM will retrieve the data along with the added status attribute within the object. Consequently, you can easily access it using $lesson->status in PHP or lesson.status in JavaScript.

To delve deeper into this topic, refer to the official Laravel documentation on accessors and mutators

Incorporate AngularJS {{expression}} into ng-repeat by utilizing a separate array

Answer №1

Answer №2

Similar questions

Combine an array of objects that are dynamically created into a single object

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

Laravel's Eloquent connection displaying a null output

Creating intricate HTML components using jQuery/Javascript

Retrieve a string value in Next.JS without using quotation marks

Making changes to a variable or option through the props in a different file

Can you explain the mechanics behind Google Voice Search? And is there an available API for it?

Encountered a problem during the installation of tensorflowjs for node | Received an error: Command failed: node-pre-gyp install

Encountering an issue when attempting to host a Next.js application on Vercel

Is it feasible to maintain a variable as a reference across views while utilizing ng-view?

Create a shader in ThreeJS without the need to include a Geometry in the scene

Navigating with Express to display HTML using JSON information

Searching for values within a JSON array in Postgresql using wildcard characters and comparison operators, while taking advantage of indexing

What advantages does using extend in the prototype offer in the inheritance pattern of three.js?

basic fading javascript image rotator

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

Angular's onreadystatechange event is triggered when the state

What is the best way to send an array to the server with $http in AngularJS?

The functionality of ngSubmit and ngDisabled seems to be malfunctioning, although ngModel is successfully linked to the

Tips for hiding a soft keyboard with jQuery