Set a property of scope object dynamically in Angular Js

问题

I am writing a generic method to get some data from a service and populate in the dynamic property name passed in the function. the value does gets assigned to the text box using angular.element assignment but does not gets populated in the model. following is 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 my controller method which internally uses a service which sends back a promise

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

attrModel is a property name in the scope object contentEntity but the name of the property is known ONLY dynamically via the method parameter.

回答1:

<button class="btn" type="button" ng-click="pickImage('contentEntity', 'imgRollover')"></button>

$scope.pickImage = function (attrModel1, attrModel2) {
        ImageSelector.selectImage().then(function (value) {
                $scope.[attrModel1][attrModel2] = value;
        });
};

should work

回答2:

I know this has already been well answered but I wanted to make a dynamic property creator. It splits attrModel by '.' and then edits $scope and adds and/or returns each property if it either exists already or not, we preserve the last key outside of the while loop so that the value just has to be appended to it.

$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;
        });
};

Of course, if you want to do it the angular way you'd have to use a service in order to do that, it could look like this

jsfiddle 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]];
            }
        };
    })

回答3:

There is already an answer but, just like to post something for dynamic properties...

<!DOCTYPE html>
<html>

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

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

        value++;

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

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

      }

    </script>
  </head>

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

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

      <br/>
      <button ng-click="pickImage(test.obj)">test</button>
      <br/>
      display the value afoter button click,
      note there is no single quote
      <br/>
      value: {{ getValue(test.obj) }}


  </body>

</html>

来源：https://stackoverflow.com/questions/25725081/set-a-property-of-scope-object-dynamically-in-angular-js

标签

javascript

angularjs

angularjs-scope