Create a dynamic property for the scope object in AngularJS

Question

Create a dynamic property for the scope object in AngularJS

I am in the process of developing a versatile method that retrieves data from a service and populates it in a dynamic property specified within the function. The issue I am encountering is that while the value is successfully assigned to the text box using angular.element, it does not populate in the model. Below is an example of the code:

<div class="input-group">
<input class="form-control" id="ImgRollover" name="ImgRollover" ng-model="contentEntity.imgRollover" placeholder="" readonly="readonly" type="text">
<div class="input-group-btn">
    <button class="btn" type="button" ng-click="pickImage('contentEntity.imgRollover')">

    </button>
</div>

Here is a snippet of my controller method which utilizes a service returning a promise:

$scope.pickImage = function (attrModel) {
        ImageSelector.selectImage().then(
            function (value) {
                //angular.element("#" + attrModel).val(value);
                $scope[attrModel] = value;
        });
};

The 'attrModel' refers to a property name within the scope object contentEntity. However, the actual name of this property is only known dynamically through the method parameter.

javascript angularjs angularjs-scope

Answer 1

Answer №1

<button class="btn" type="button" ng-click="setImage('highlight', 'imgPreview')"></button>

$scope.setImage = function (modelAttr1, modelAttr2) {
        ImageSelector.chooseImage().then(function (result) {
                $scope[modelAttr1][modelAttr2] = result;
        });
};

This solution should be effective.

Answer 2

<button class="btn" type="button" ng-click="setImage('highlight', 'imgPreview')"></button>

$scope.setImage = function (modelAttr1, modelAttr2) {
        ImageSelector.chooseImage().then(function (result) {
                $scope[modelAttr1][modelAttr2] = result;
        });
};

This solution should be effective.

Answer 3

Answer №2

Although there have been comprehensive responses, I wanted to create a dynamic property generator. The function below splits the attrModel by '.', then modifies the $scope by adding or returning each property based on whether it already exists or not. The last key is preserved outside of the loop for easy appending of values.

$scope.pickImage = function (attrModel) {
        ImageSelector.selectImage().then(
            function (value) {
                var parent = $scope,
                    current,
                    attribute,
                    attributes = attrModel.split('.');

                while(attributes.length > 1 &&
                      (attribute = attributes.shift()) &&
                      (current = parent[attribute] || (parent[attribute] = {}))) {

                    parent = current;
                }
                current[attributes[0]] = value;
        });
};

If you prefer doing this the Angular way, using a service could be more suitable. Here's an example:

View jsfiddle example here

angular.module('myApp').service('ObjectWalker', function () {
        var getNodeData = function (object, path) {
            var parent = object,
                current,
                attribute,
                attributes = path.split('.');

            while(attributes.length > 1 &&
                  (attribute = attributes.shift()) &&
                  (current = parent[attribute] || (parent[attribute] = {}))) {

                parent = current;
            }
            return [current, attributes[0]];
        };

        return {
            set: function(object, path, value) {
                var nodeData = getNodeData(object, path);
                nodeData[0][nodeData[1]] = value;
            },
            get: function(object, path) {
                var nodeData = getNodeData(object, path);
                return nodeData[0][nodeData[1]];
            }
        };
    })

Answer 4

Although there have been comprehensive responses, I wanted to create a dynamic property generator. The function below splits the attrModel by '.', then modifies the $scope by adding or returning each property based on whether it already exists or not. The last key is preserved outside of the loop for easy appending of values.

$scope.pickImage = function (attrModel) {
        ImageSelector.selectImage().then(
            function (value) {
                var parent = $scope,
                    current,
                    attribute,
                    attributes = attrModel.split('.');

                while(attributes.length > 1 &&
                      (attribute = attributes.shift()) &&
                      (current = parent[attribute] || (parent[attribute] = {}))) {

                    parent = current;
                }
                current[attributes[0]] = value;
        });
};

If you prefer doing this the Angular way, using a service could be more suitable. Here's an example:

View jsfiddle example here

angular.module('myApp').service('ObjectWalker', function () {
        var getNodeData = function (object, path) {
            var parent = object,
                current,
                attribute,
                attributes = path.split('.');

            while(attributes.length > 1 &&
                  (attribute = attributes.shift()) &&
                  (current = parent[attribute] || (parent[attribute] = {}))) {

                parent = current;
            }
            return [current, attributes[0]];
        };

        return {
            set: function(object, path, value) {
                var nodeData = getNodeData(object, path);
                nodeData[0][nodeData[1]] = value;
            },
            get: function(object, path) {
                var nodeData = getNodeData(object, path);
                return nodeData[0][nodeData[1]];
            }
        };
    })

Answer 5

Answer №3

Although there is already a response, I'd still like to share something regarding dynamic properties...

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.2.23/angular.js"></script>
    <script type="text/javascript">

      var num = 0;
      function mainCtrl($scope) {

        num++;

        $scope.pickImage = function (attrModel) {
            num++;
            alert(attrModel)
            $scope[attrModel] = num;
        };

        $scope.getValue = function(attrModel) {
          return $scope[attrModel];
        }

      }

    </script>
  </head>

  <body ng-app ng-controller="mainCtrl">

      <input type="text" ng-model="example.obj" />

      <br/>
      <button ng-click="pickImage(example.obj)">Click Me</button>
      <br/>
      Display the value after button click,
      please note that there are no single quotes
      <br/>
      Value: {{ getValue(example.obj) }}


  </body>

</html>

Answer 6

Although there is already a response, I'd still like to share something regarding dynamic properties...

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.2.23/angular.js"></script>
    <script type="text/javascript">

      var num = 0;
      function mainCtrl($scope) {

        num++;

        $scope.pickImage = function (attrModel) {
            num++;
            alert(attrModel)
            $scope[attrModel] = num;
        };

        $scope.getValue = function(attrModel) {
          return $scope[attrModel];
        }

      }

    </script>
  </head>

  <body ng-app ng-controller="mainCtrl">

      <input type="text" ng-model="example.obj" />

      <br/>
      <button ng-click="pickImage(example.obj)">Click Me</button>
      <br/>
      Display the value after button click,
      please note that there are no single quotes
      <br/>
      Value: {{ getValue(example.obj) }}


  </body>

</html>

Create a dynamic property for the scope object in AngularJS

Answer №1

Answer №2

View jsfiddle example here

Answer №3

Similar questions

Ways to disable the caching feature in Google Chrome

How can you extract and save all links on a webpage based on their class name?

How to extract only the value from a MongoDB query using NodeJS

Maximizing efficiency when conducting a thorough analysis of the contents within a JSON object and implementing jQuery

Obtaining a value based on another value within an object the AngularJS approach

Create a cylindrical HTML5 canvas and place a camera view inside the cylinder

Tips for saving information from a constantly changing table into a database

It seems that the Bootstrap 4 Modal Pop up window is having difficulty closing

When attempting to print using React, inline styles may not be effective

Show text using AJAX when the form is submitted

Fastblox - utilizing javascript SDK for group chatting

Steps to fix the moment-timezone import problem on meteor npm

Generating step definitions files automatically in cucumber javascript - How is it done?

Tips for modifying the font color of placeholders within md-chips?

Encountering an Ajax Issue with Laravel 5.4

Submit the form to MailChimp and then show a personalized success page

Step-by-step guide on generating multiple division elements according to the values specified by the user

Display and conceal div with jQuery dropdown

Upon reloading, the dynamically generated table does not appear accurately

Synchronous AJAX calls in jQuery