Angularjs如何将json属性（集合或数组）绑定到动态输入表单答案

【问题标题】：Angularjs How to bind a json attribute(Set or array) to a dynamic input formAngularjs如何将json属性（集合或数组）绑定到动态输入表单
【发布时间】：2016-01-15 15:41:42
【问题描述】：

所以我有一个看起来像这样的输入表单

<div>
  <div class="form-group">
    <label for="inputQuestion" class="col-sm-2 control-label">Question</label>
    <div class="col-sm-10">
      <input data-ng-model="publication.question" type="text" class="form-control" id="inputQuestion"                       placeholder="Question">
    </div>
  </div>
  <br>
  <br>
  <ul id="itemContainer">
  </ul>
</div>

<button type="submit" data-ng-click=addItem()  data-ng-click=currentid=currentid+2 class="btn btn-info">Add Item</button>

添加项目按钮使用在控制器上运行的 js 代码在ul itemContainer 中添加项目我现在要做的是将itemContainer 中的项目与“publication”的数组属性绑定让我们说“publication .options”我怎样才能做到这一点？

如果您认为我的方法完全错误，我将不胜感激其他实现相同结果的方法！

提前感谢您的帮助！

【问题讨论】：

标签： javascript angularjs data-binding angularjs-ng-model

【解决方案1】：

我认为最好的方法是有一系列问题并每次在里面推送新问题

控制器

angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {

  $scope.publication = {
    question: "Is it good ?",
    options: []
  };
  $scope.addItem = function() {

    $scope.publication.options.push($scope.inputQuestion);
  }
}]);

查看

    <body ng-controller="MainController">
  <div>
    <div class="form-group">
      <label for="inputQuestion" class="col-sm-2 control-label">Options</label>
      <div class="col-sm-10">
        <input data-ng-model="inputQuestion" type="text" class="form-control" id="inputQuestion" placeholder="Write here...">
        <button type="submit" ng-click="addItem()" class="btn btn-info">Add Option</button>
      </div>
    </div>
    <br>
    <br>
    <h1 class="col-sm-2">Question: {{publication.question}}</h1>
    <hr/>
    <ul ng-repeat="question in publication.options">
      <li>{{question}}</li>
    </ul>
  </div>
</body>

工作示例here

【讨论】：

我不认为你有问题，也许是因为我的配方。用户应该选择一个publication.quetion 和多个publication.potentialAnswers。通过单击 addItem，用户只需输入他想问的问题的另一个可能答案！