Question

我的控制器如下：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.questionTypes = [
    {display: 'Text', 'name': 'text'},
    {display: 'Paragraph', 'name': 'textarea'},
    {display: 'Multiple Choice', 'name': 'radio'},
 ];

  $scope.top = {
    heading: '',
    questions: [
      {
        tite: 'title 1',
        choices: ['']
      }
    ]
  };

});

一个HTML正文如下：

<body ng-controller="MainCtrl">
    <input ng-model="top.heading" placeholder="heading"/>
    <br/>
    <div ng-repeat="question in top.questions track by $index">
        <select ng-model="question.type" ng-options="c.name as c.display for c in questionTypes"></select>
        <div ng-if="question.type == 'radio'">
            <div ng-repeat="option in question.choices track by $index">
              <input type="text" ng-model="option"/>
              <button ng-click="question.choices.push('')" ng-disabled="$index < question.choices.length - 1">Add</button>
              <button ng-click="question.choices.splice($index, 1)" ng-disabled="question.choices.length == 1">Del</button>
            </div>
        </div>
    </div>
    <pre>{{top | json}}</pre>
</body>

当用户选择Multiple Choice时，我想显示一个片段，提供添加各种选择的功能。选项显示在转发器中。

一切正常，但嵌套转发器上的数据绑定不起作用。我认为这与范围有关，但我无法弄明白。

任何帮助将不胜感激。

我在http://plnkr.co/edit/6FxY44HgddRjrLOHlQGF

创建了一个plunkr

Answer 1

在摸索了一段时间之后，这就是我为解决这个问题所做的。

我改变了：

<input type="text" ng-model="option"/> //after changing model to ng-model

要

<input type="text" ng-model="question.choices[$index]"/>

这允许输入引用父对象和对象上的choices数组，而不是引用ng-repeat中的选项引用。

嵌套angularjs转发器中的数据绑定

1 个答案: