Exploring the process of accessing an object's key in the DOM through Angular by utilizing its variable name

Question

Exploring the process of accessing an object's key in the DOM through Angular by utilizing its variable name

Within my controller, I have a function that adds a variable called comments to the scope.

$scope.showComments = function(id){
    dataService.getComments(id).then(function(data){
        $scope.comments[id] = data.comments;
        console.log($scope.comments);
    });
}

I am trying to use ng-repeat on a specific id, but so far it's not functioning as expected. Any suggestions for fixing this issue?

<div class="commentsContainer" id="{{id}}">
    <div class="eachcomment" ng-repeat="comment in comments.{{id}}">
        <p>{{comment.content}}
    </div>
</div>

The correct id is being passed to the outer div, however, the ng-repeat directive is not working properly.

javascript angularjs dom

Answer 1

Answer №1

To achieve this functionality, it is recommended to utilize a filter in the following manner:

<div class="eachcomment" ng-repeat="comment in comments | filterId: id">
    <p>{{comment.content}}
</div>

To create the filter:

app.filter('filterId', function(){
    return function(collection, id) {
        var output = [];
        angular.forEach(collection, function(item) {
            if(item.id == id) {
                output.push(item)
            }
        })
        return output;
    }
})

Alternatively, you can opt for a more straightforward approach:

<div class="eachcomment" ng-repeat="comment in comments | filter: checkId">
        <p>{{comment.content}}
    </div>

In your controller:

$scope.checkId = function(item) {
    if($scope.id == item.id) {
        return true;
    }
    return false;
}

Answer 2

To achieve this functionality, it is recommended to utilize a filter in the following manner:

<div class="eachcomment" ng-repeat="comment in comments | filterId: id">
    <p>{{comment.content}}
</div>

To create the filter:

app.filter('filterId', function(){
    return function(collection, id) {
        var output = [];
        angular.forEach(collection, function(item) {
            if(item.id == id) {
                output.push(item)
            }
        })
        return output;
    }
})

Alternatively, you can opt for a more straightforward approach:

<div class="eachcomment" ng-repeat="comment in comments | filter: checkId">
        <p>{{comment.content}}
    </div>

In your controller:

$scope.checkId = function(item) {
    if($scope.id == item.id) {
        return true;
    }
    return false;
}

Answer 3

Answer №2

If you want to achieve this, use the following code snippet:

<div ng-app="myApp" ng-controller="example">
    <div class="messagesContainer" id="{{id}}">
        <div class="eachmessage" ng-repeat="(identifier, message) in messages">
            <p ng-show="identifier === id">{{message.content}}</p>
        </div>
    </div>
</div>

JavaScript:

angular.module('myApp', [])
    .controller('example', ['$scope', function ($scope) {
    $scope.id = 0;
    $scope.messages = [{
        content: 'Good Morning'
    }, {
        content: 'Good Evening'
    }];

}]);

JSFiddle Link

Answer 4

If you want to achieve this, use the following code snippet:

<div ng-app="myApp" ng-controller="example">
    <div class="messagesContainer" id="{{id}}">
        <div class="eachmessage" ng-repeat="(identifier, message) in messages">
            <p ng-show="identifier === id">{{message.content}}</p>
        </div>
    </div>
</div>

JavaScript:

angular.module('myApp', [])
    .controller('example', ['$scope', function ($scope) {
    $scope.id = 0;
    $scope.messages = [{
        content: 'Good Morning'
    }, {
        content: 'Good Evening'
    }];

}]);

JSFiddle Link

Answer 5

Answer №3

When accessing a property by a variable key, it is recommended to use bracket notation:

<div class="commentsContainer" id="{{id}}">
    <div class="eachcomment" ng-repeat="comment in comments[id]">
        <p>{{comment.content}}
    </div>
</div>

Answer 6

When accessing a property by a variable key, it is recommended to use bracket notation:

<div class="commentsContainer" id="{{id}}">
    <div class="eachcomment" ng-repeat="comment in comments[id]">
        <p>{{comment.content}}
    </div>
</div>

Exploring the process of accessing an object's key in the DOM through Angular by utilizing its variable name

Answer №1

Answer №2

Answer №3

Similar questions

Some parts of the controller exhibit undefined values when accessing the Angular variable, while in other areas, it returns the expected value

Identifying the absence of a character at the end of the last line in Node.js to detect

Setting Up Date Selection Tool for Storing Data in MySQL Database

Unable to employ Javascript while utilizing AJAX within jQuery Mobile

Guide on sending a JSON response from a POST request in JavaScript

The ngResource module failed to instantiate within the angular/browserify environment

looking to switch out the iframe when clicked

Modify the color of the header on Material-UI Date Picker

What is the best way to alternate $httpBackend when[method] declarations in unit tests to handle multiple requests?

Ways to effortlessly activate an angular directive once the page has been fully loaded

The proper way to cancel useEffect's Async in TypeScript

Commitments, the Angular2 framework, and boundary

Is there a way to select a checkbox in the main frame while in the $(document).ready of an embedded iframe?

What is the process for creating a register command using discord.js and MongoDB Atlas?

The onchange event is failing to trigger any JavaScript function

A brief overview of handling currency in AngularJS

Error: Exceeded the maximum call stack size - What causes this and how can it be prevented?

Issue with form validation causing state value to remain stagnant

Struggling with loading external scripts within background.js in Chrome extensions?

remove a row from a table within a Firestore database