How to use a string as a variable in AngularJs

Question

How to use a string as a variable within the scope. Heres my code:

HTML (one of many divs like this where type1 can be type2, type3, and so on):

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

controller:

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

How can I run $scope.error.type1 = 'Incorrect'? I have many different errors on a form above each input field and the validate function is called when a value is entered. My goal is to avoid writing a TON of conditionals based on what the string is equal too. How can I use this dynamically?

Answer 1

I might be getting this all wrong, but how about a reusable directive?

<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) {}
             }
         }
     ])