Question

在一个级别上具有另一个可用变量的绑定变量名称正在运行，但不适用于多级对象。下面是示例。

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>

请告知我，无需使用任何指令。

Answer 1

问题出在您尝试使用的路径中。一级有效是因为您正在

$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之类的对象属性

Answer 2

问题是您正在执行类似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>

AngularJS-无法绑定可变名称，该名称存储在具有ng-model的另一个变量中

2 个答案: