Utilizing a string as a variable in AngularJS: a step-by-step guide

Question

Utilizing a string as a variable in AngularJS: a step-by-step guide

Can anyone help me figure out how to utilize a string as a variable within the scope in my code? Here's what I have:

In my HTML (where type1 can be type2, type3, and more):

<div style="color:red;font-size:11px;">{{ error.type1 }}</div>

And here is part of my controller:

$scope.validate = function(string, value){
        // let's say string = type1
        if (value != 'answer'){
            $scope.error.string = 'Incorrect, try again';
        }
    }

My question is, how do I dynamically set $scope.error.type1 = 'Incorrect'? I have multiple errors displayed on a form above each input field, and the validate function checks when a value is entered. I want to avoid writing numerous conditionals based on the string value. Any suggestions on how to achieve this dynamically?

javascript angularjs angularjs-scope

Answer 1

Answer №1

Could it be possible to implement a reusable directive in this scenario?

<input type='email' ng-model='user.email' />
<error-feedback field='email' errors='errors'></error-feedback>

<input type='text' ng-model='user.name' />
<error-feedback field='name' errors='errors'></error-feedback>

the controller

$scope.errors={}
if (!isValid(user.email)) {
   setError('email','Your email is not valid');
}

if (alreadyExists(user.email)) {
   setError('email','This email already exists');
}

const setError = function(type, error) {
   if ($scope.errors[type]) $scope.errors[type].push(error);
  else $scope.errors[type] = [error];
}

the directive

app.directive('errorFeedback', ['$compile', '$templateCache',
         function($compile, $templateCache) {
             return {
                 template: "<div ng-repeat='error in myerrors' class='error'>{{error}}</div>",
                 scope: {
                     field: "=",
                     errors: "="
                 },
                 controller: ["$scope", "$timeout",
                     function($scope, $timeout) {
                            // assuming errors might be an array
                            $scope.myerrors = $scope.errors[$scope.field]
                     }
                 ],
                 link: function(scope, element, attr) {}
             }
         }
     ])

Answer 2

Could it be possible to implement a reusable directive in this scenario?

<input type='email' ng-model='user.email' />
<error-feedback field='email' errors='errors'></error-feedback>

<input type='text' ng-model='user.name' />
<error-feedback field='name' errors='errors'></error-feedback>

the controller

$scope.errors={}
if (!isValid(user.email)) {
   setError('email','Your email is not valid');
}

if (alreadyExists(user.email)) {
   setError('email','This email already exists');
}

const setError = function(type, error) {
   if ($scope.errors[type]) $scope.errors[type].push(error);
  else $scope.errors[type] = [error];
}

the directive

app.directive('errorFeedback', ['$compile', '$templateCache',
         function($compile, $templateCache) {
             return {
                 template: "<div ng-repeat='error in myerrors' class='error'>{{error}}</div>",
                 scope: {
                     field: "=",
                     errors: "="
                 },
                 controller: ["$scope", "$timeout",
                     function($scope, $timeout) {
                            // assuming errors might be an array
                            $scope.myerrors = $scope.errors[$scope.field]
                     }
                 ],
                 link: function(scope, element, attr) {}
             }
         }
     ])

Utilizing a string as a variable in AngularJS: a step-by-step guide

Answer №1

Similar questions

Retrieving input field values in JS/Ajax without needing to refresh the page or click a button

Navigating through root and sub applications within AngularJS can be managed effectively when housed in sub directories

How can I change an element using jQuery's getElementById method?

Compiling models at the second level

Changing the backdrop hue behind the dropdown menu items to give a fresh look

Issues with React Material UI Dialog Displaying Incorrect Information

The value of innerHTML is currently "undefined"

The XML format is not being rendered properly

Techniques on how to activate checkbox modification through card clicks

Which property is best suited for styling a phone number field in the MUI data grid in ReactJS?

Enclosing sets of lists with div containers

Working with nested SQL queries within a function in a Node.js environment

AngularJS textbox validation for numbers and required in repeating mode ensures that the user input is a

A custom script for Google Sheets that accesses data from cell "A" and populates cell "B" with information based on the value in cell "A"

How to Create an Interactive JavaScript Drop Down List for Displaying and Concealing Divs

Extracting the name of a track from the /r/listenToThis subreddit for an IFTTT automation script

JavaScript has received an event on Server XHR

Three.js displaying only a fraction of gltf model on screen

Leveraging data schemas to manage the feedback from APIs

Tips on transferring information from JavaScript to JSON structures