Angularjs How to bind a json attribute(Set or array) to a dynamic input form

Question

So I have an input form which looks like this

<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>

The add Item button adds items in the ul itemContainer using js code running on the controller what I want to do now is to bind the items in the itemContainer with an array attribute of the "publication" lets say "publication.options" how can I achieve that ?

In case you believe my approach is totally wrong I would appreciate other ways of achieving the same result !

Thanks for your help in advance !

puemos · Answer 1 · 2016-01-15T16:16:35.100

I think the best way is to have an array of questions and push each time the new question inside

Controller

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

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

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

View

    <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>

Working example here

I don't think you got the problem maybe it's because of my formulation. There is one publication.quetion and many publication.potentialAnswers which the user should chose. by clicking addItem the user just enters one more possible answer to the question he wants to ask ! — Nikos, Jan 15 '16 at 16:07

Angularjs How to bind a json attribute(Set or array) to a dynamic input form

1 Answers1