AngularJS-无法用ng模型绑定存储在另一个变量中的名称

在一个级别上绑定另一个变量中的变量名是有效的，但不适用于多级对象。下面是一个例子。

var app = angular.module('app', []);
app.controller("stageController", stageController);
function stageController($scope) {
$scope.model = 'realModel';
$scope.notmodel = 'realModel.innerRealModel';
$scope.vars = {};    // variables container
$scope.vars.realModel ="this is working";
$scope.vars.realModelNot = {};
$scope.vars.realModelNot.innerRealModel = 'this is not working';
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="stageController">
<form name="myForm" novalidate="">
<input type="text" name="myText" ng-model="vars[model]" />
<input type="text" name="myText2" ng-model="vars[notmodel]" />
</form>
<p>Textbox1 : {{vars.realModel}}<p>
<p>Textbox2 : {{vars.realModelNot.innerRealModel}}<p>
</body>

请让我知道在不使用任何干燥剂的情况下进行此操作。

问题出在您尝试使用的路径上。第一级之所以有效，是因为你在做

$scope.model = 'realModel';  // so your template will change vars[model] 
// to vars['realModel']

但对于第二层，你正在进行

$scope.notmodel = 'realModel.innerRealModel'; // so your template will bind to
// vars['realmodel.innerRealModel']
// and you want vars['realmodel']['innerRealModel']

此外，如果您使用字符串输入字段绑定到vars.realModel，它将不再能够保存像innerRealModel这样的对象属性

问题是您正在做一些类似vars[realModel.innerRealModel]的事情，但这些操作不起作用。为了做这样的事情，你需要做：

vars[realModelNot][innerRealModel]

另一个问题是，为什么不直接使用作用域？为什么要创建另一个作用域属性来存储要访问的属性的名称？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="stageController">
<form name="myForm" novalidate="">
<input type="text" name="myText" ng-model="vars.realModel" />
<input type="text" name="myText2" ng-model="vars.realModelNot.innerRealModel" />
</form>
<p>Textbox1 : {{vars.realModel}}<p>
<p>Textbox2 : {{vars.realModelNot.innerRealModel}}<p>
</body>
<script>
var app = angular.module('app', []);
function stageController($scope) {
$scope.vars = {};    // variables container
$scope.vars.realModel ="this is working";
$scope.vars.realModelNot = {};
$scope.vars.realModelNot.innerRealModel = 'this is not working';
}
</script>

相关内容

最新更新

热门标签：