Ways to utilize the AngularJS ngShow command in order to display a certain element only if it is included in an array

Question

Ways to utilize the AngularJS ngShow command in order to display a certain element only if it is included in an array

In my quest to quickly display a list of all the authors linked to a particular publication, I've encountered an issue.

Everything runs smoothly when $scope.publications.authors holds a single value. However, problems arise when there are multiple values stored in an array, as shown below.

I understand that the conditional statement for the AngularJS ngShow directive is not suitable for arrays, but I'm struggling to find the correct approach.

HTML:

<div ng-repeat="person in persons" ng-show="person.firstName == publication.authors">{{person.firstName}}</div>

JS:

$scope.publications = [
{"title": "Research Paper",
 "authors": ["Bill", "George"]};

$scope.persons = [
{"firstName": "Bill",
 "lastName": "Smith"},
{"firstName": "George",
 "lastName": "Jones"},
{"firstName": "Mike",
 "lastName": "Thomas"};

javascript arrays angularjs

Answer 1

Answer №1

If you want to properly display the data structure of publications, it's recommended to implement a nested repeater. Utilizing a function that takes in the current person and publication can help drive the presentation.

<div ng-repeat="publication in publications">{{publication.title}}
    <br/>
    <div ng-repeat="person in people" ng-show="show(person, publication)">{{person.firstName}}</div>
</div>

function ctrl($scope) {
    $scope.publications = [{
        "title": "Research Paper",
            "authors": ["Bill", "George"]
    }];

    $scope.people = [{
        "firstName": "Bill",
            "lastName": "Smith"
    }, {
        "firstName": "George",
            "lastName": "Jones"
    }, {
        "firstName": "Mike",
            "lastName": "Thomas"
    }];

    $scope.show = function (person, publication) {
        return publication.authors.indexOf(person.firstName) >= 0;
    }
}

Answer 2

If you want to properly display the data structure of publications, it's recommended to implement a nested repeater. Utilizing a function that takes in the current person and publication can help drive the presentation.

<div ng-repeat="publication in publications">{{publication.title}}
    <br/>
    <div ng-repeat="person in people" ng-show="show(person, publication)">{{person.firstName}}</div>
</div>

function ctrl($scope) {
    $scope.publications = [{
        "title": "Research Paper",
            "authors": ["Bill", "George"]
    }];

    $scope.people = [{
        "firstName": "Bill",
            "lastName": "Smith"
    }, {
        "firstName": "George",
            "lastName": "Jones"
    }, {
        "firstName": "Mike",
            "lastName": "Thomas"
    }];

    $scope.show = function (person, publication) {
        return publication.authors.indexOf(person.firstName) >= 0;
    }
}

Answer 3

Answer №2

To ensure the existence of an element in the persons array, create a function in your controller and invoke it using ng-show. Refer to the example in the following fiddle:

http://jsfiddle.net/ABC123/456/

Answer 4

To ensure the existence of an element in the persons array, create a function in your controller and invoke it using ng-show. Refer to the example in the following fiddle:

http://jsfiddle.net/ABC123/456/

Answer 5

Answer №3

In my opinion, the most effective approach would involve utilizing a method in your controller rather than attempting to loop through all the data within the DOM.

There are various methods you can use to achieve this. For example, if you prefer to have all the authors' names displayed on a single line, you could create a method that takes the authors as input and returns a string with all the names. You can then reference this method for the content of your div like so:

Alternatively, you could create a method that returns an array of names and iterate through it using an ng-repeat directive, similar to the following:

Answer 6

In my opinion, the most effective approach would involve utilizing a method in your controller rather than attempting to loop through all the data within the DOM.

There are various methods you can use to achieve this. For example, if you prefer to have all the authors' names displayed on a single line, you could create a method that takes the authors as input and returns a string with all the names. You can then reference this method for the content of your div like so:

Alternatively, you could create a method that returns an array of names and iterate through it using an ng-repeat directive, similar to the following:

Ways to utilize the AngularJS ngShow command in order to display a certain element only if it is included in an array

Answer №1

Answer №2

Answer №3

Similar questions

Converting this Jquery function to vanilla Javascript

Validation is not being enforced for the input field labeled as 'name' in the form

The communication between Angular and MVC controller fails to transfer the value, resulting in a null value being

Can anyone recommend a regular expression that would target values ranging from 0.5 to 24?

Error message: "React Component not identified"

Retrieve the array element that contains a date range matching the current time using JavaScript

Running JavaScript code within a modal dialog box

What is the measure of randomness created by Math.random?

Steps for assigning certain elements in an array to null and then repositioning them to the end of the array

Is there a way to have the even numbers in an array printed before the odd numbers?

Displaying an alert when the text box contains a duplicate value

Stacked column tooltip displaying an array of 3 values

Check the File Format (not just the Extension) prior to Uploading

Populating an array prior to AJAX transmission

Is it possible to generate a JS error from Go web assembly?

What is the best way to modify the background of my li element when it is clicked on?

What is the best way to bring Axios into the main.js file in a Vue project?

Unleashing memory in C from the stack

What is the best method to override the CSS transition effect with JavaScript?

Add a new element to an array in a PHP file that will then output the modified