How to assign a value in an HTML element using AngularJS

Question

How to assign a value in an HTML element using AngularJS

Currently, I am utilizing Angular JS to iterate through a portion of a scope that is initially a JSON array.

My objective is to verify the existence of a specific value in that array. If the value exists, then certain actions should be taken. The code below achieves this functionality, however, I am struggling to find a way to temporarily store the "status" variable.

<div ng-repeat="item_value in item['slug'].values">
    {{item_value}}
    <div ng-if="item_value == 'dogs_cats'">
        Find a method to set "status" to true if the condition above is met.
    </div>
</div>
<div ng-if="status == 'true'">
    Perform an action here.
</div>

I am open to alternative approaches and suggestions on whether this logic belongs in the template or not. It would be beneficial to have multiple solutions to choose from with recommendations on the preferred option.

javascript angularjs angularjs-ng-repeat angular-ng-if

Answer 1

Answer №1

A possible solution could be:

<div ng-if="item_value === 'dogs_cats'" ng-init="status = true">
    Set "status" to true if condition is met.
</div>

However, it would be better to handle this logic in the controller.

Answer 2

A possible solution could be:

<div ng-if="item_value === 'dogs_cats'" ng-init="status = true">
    Set "status" to true if condition is met.
</div>

However, it would be better to handle this logic in the controller.

Answer 3

Answer №2

To improve your code organization, consider moving some of it into a controller for better structuring. Here's an example:

HTML:

<div ng-controller='itemSlugs'>
    <div ng-repeat="item_value in item['slug'].values">
        {{item_value}}
    </div>
    <div ng-if="status">
        Do something here.
    </div>
</div>

Javascript:

angular.module('myApp', []).
    controller('itemSlugs', ['$scope', function($scope){
        $scope.item.slug.values = [ /*initialize here*/ ];
        $scope.status = false;
        $scope.$watch('item.slug.values', function(){
            $scope.status = false;
            $scope.item.slug.values.forEach(function(item_value){
                if (item_value == 'dogs_cats'){
                    $scope.status = true;
                }
            });
        });
    });

A watch has been added to monitor any changes in item.slug.values and update the status accordingly.

Answer 4

To improve your code organization, consider moving some of it into a controller for better structuring. Here's an example:

HTML:

<div ng-controller='itemSlugs'>
    <div ng-repeat="item_value in item['slug'].values">
        {{item_value}}
    </div>
    <div ng-if="status">
        Do something here.
    </div>
</div>

Javascript:

angular.module('myApp', []).
    controller('itemSlugs', ['$scope', function($scope){
        $scope.item.slug.values = [ /*initialize here*/ ];
        $scope.status = false;
        $scope.$watch('item.slug.values', function(){
            $scope.status = false;
            $scope.item.slug.values.forEach(function(item_value){
                if (item_value == 'dogs_cats'){
                    $scope.status = true;
                }
            });
        });
    });

A watch has been added to monitor any changes in item.slug.values and update the status accordingly.

How to assign a value in an HTML element using AngularJS

Answer №1

Answer №2

Similar questions

Using jQuery to implement interactive hover effects on individual items within a list

Implementing an automatic link generation feature for files within a directory using JavaScript

Is it possible for me to use ts files just like I use js files in the same manner?

Open Zurb Foundation Reveal Modal from the bottom of the screen

Tips on redirecting the treeview menu using Material-UI 4

Understanding the fundamentals of event handling in JavaScript

What is the method for configuring automatic text color in CKEditor?

The middleware in Express.js is failing to execute the next function

Struggle with encoding dropdown menu options

React- Input value disappears after submission

Updating the Angular-phonecat application from version 1.x has encountered an issue: Unknown provider error with phoneProvider and phone

I am facing an issue with my useFetch hook causing excessive re-renders

React fails to acknowledge union types

The flow union type operates smoothly without any errors occurring

What is the best way to customize the spacing of grid lines in chartist.js?

Execute a Node.JS query using an HTML select dropdown

Please provide links to both the image and text within a Rails 3.1 application

Pass PHP date to JavaScript and increase its value

The onBlur event attached to a div is triggered when transitioning from one input element to another within the same div

Retrieve the node-postgres result and store it in a separate object beyond the callback function