Question

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

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

我想动态设置输入的ngModel，因为它会改变。

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

1）

$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')">

2）

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

有什么想法吗？

Answer 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

Answer 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

Answer 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

AngularJS - 带＆＃34; key.key.key..value＆＃34;的动态ng模型

3 个答案:

HTML

JS