AngularJS - 带有“key.key.key..value”的动态 ngModel答案

【问题标题】：AngularJS - Dynamic ngModel with "key.key.key..value"AngularJS - 带有“key.key.key..value”的动态 ngModel
【发布时间】：2014-07-11 14:07:43
【问题描述】：

我知道这看起来像是一个重复的问题，但我找不到与此相关的任何内容？

我有一个变量，例如"settings.page.header.title"

我想将输入的ngModel动态设置为上述内容，因为它会改变。

我尝试了以下方法但没有成功：

$scope.getDynamicModel = function(str) {
  var levels = str.split(".");
  var model = $scope;
  for (var i = 0, i < levels.length; i++) {
    var level = levels[i];
    model = model[level];
  }
  return model;
}

<input ng-model="getDynamicModel('settings.page.header.title')">

<input ng-model="{{ 'settings.page.header.title' }}">

有什么想法吗？

【问题讨论】：

只需去掉模型属性中函数调用中的单引号即可。

标签： javascript angularjs angular-ngmodel

【解决方案1】：

写了一个可能有帮助的指令：

app.directive('myModel', function($compile){
  return {
    link: function(scope,elm,attrs){
      elm.removeAttr('my-model');
      scope.$watch(attrs.myModel, function(value){
        if (value)
          $compile(elm.attr('ng-model',value))(scope)
      })
    }
  }
})

这将添加一个观察者，它将更新元素的ng-model，并重新编译。删除my-model 是为了避免无限编译元素。

DEMO

【讨论】：

【解决方案2】：

html

<input ng-model="settings.page.header.title" type="text">

js

$scope.settings = {
  page: {
    header: {
      title: 'myTitle'
    }
  }
}

http://plnkr.co/edit/mrcBUNrq90awHaqPYOq4?p=preview

【讨论】：

我不认为这就是 OP 的意思。
是的，这不是我的意思，抱歉。需要 $scope 变量名是动态的。

【解决方案3】：

稍作修改以防止失败：

$scope.getDynamicModel = function(str) {
    var levels = str.split(".");
    var model = $scope;
    for (var i = 0; i < levels.length; i++) {
        var level = levels[i];
        model = model[level];

        if (model == null) { 
            return model;
        }
    }

    return model;
}

见fiddle

【讨论】：