在Angular Js中动态设置范围对象的属性答案

【问题标题】：Set a property of scope object dynamically in Angular Js在Angular Js中动态设置范围对象的属性
【发布时间】：2014-09-08 13:10:43
【问题描述】：

我正在编写一个通用方法来从服务中获取一些数据并填充到函数中传递的动态属性名称中。该值确实使用 angular.element 分配分配给文本框，但不会填充到模型中。以下是代码。

<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>

这是我的控制器方法，它在内部使用发送回承诺的服务

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

attrModel 是范围对象 contentEntity 中的属性名称，但属性名称只能通过方法参数动态知道。

【问题讨论】：

ng_model - 是错字吗？必须是 ng-model
当使用ng-model绑定时不需要使用val()设置值（使用正确的语法）
您正在选择一个不存在的 id 为 'contentEntity.imgRollover' 的元素
所以添加两个参数...pickImage('contentEntity', 'imgRollover')
@Vikram 如果您需要使用未知的对象深度，我提出了其他建议

标签： javascript angularjs angularjs-scope

【解决方案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;
        });
};

应该工作

【讨论】：

【解决方案2】：

我知道这已经得到了很好的回答，但我想制作一个动态属性创建者。它将attrModel 拆分为'.'，然后编辑$scope 并添加和/或返回每个属性（如果它已经存在或不存在），我们将最后一个键保留在while 循环之外，以便只需附加该值给它。

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

当然，如果你想以有角度的方式来做，你必须使用服务才能做到这一点，它可能看起来像这样

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】：

已经有了答案，但是，就像为动态属性发布一些东西......

<!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>

【讨论】：