Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have researched online on how to create an additional form field. The method I am using comes from this site.

http://mrngoitall.net/blog/2013/10/02/adding-form-fields-dynamically-in-angularjs/

So basically what I am trying to do, is have data inputted in. But I don't know how many data points a certain person would like to put in. So I what to enable it so I can let them put additional points if they wish.

I have this in my tag:

  <script>
  function AngularCtrl($scope) {
  function Controller($scope) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
  }

$scope.choices = [{id: 'choice1'}]; 

$scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
};


$scope.showAddChoice = function(choice) {
    return choice.id === $scope.choices[$scope.choices.length-1].id;
};



$scope.showChoiceLabel = function (choice) {
    return choice.id === $scope.choices[0].id;
}



}
</script>

I then have this in my tag:

<div class="form-group" ng-controller="Controller" data-ng-repeat="choice in choices">
  <form novalidate class="simple-form">
        Title of Chart: <input type="text" ng-model="chart.title" /><br />
        Series Name: <input type="text" ng-model="chart.series" /><br />
        Series Data: <input type="text" ng-model="series.data" /><br>

        <label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
        <button ng-show="showAddChoice(choice)" ng-
         click="addNewChoice()">Add another choice</button>
        <input type="text" ng-model="choice.name" name="" placeholder="Enter
         a new data point">         
        <br>
        <button ng-click="reset()">RESET</button>
        <button ng-click="update(user)">SAVE</button>
  </form>
</div>

So as you can see, what I have is 4 form fields. I want choices to add a new form field. I have the button, but when I click the button to add another form field; it does not work. It stays the same.

I was wondering if what I have in my tags was off a bit.

Thank you for the help. Been struggling on this for hours.

share|improve this question
    
I'm a beginner w/ ng, so this is just an idea, not necessarily the 'right answer'. I would use an ng-repeat around the UI you need for each choice. Then when you push a new choice object into your array, angular will render a new set of html elements for that choice. Seems like maybe a directive that holds the editing form for a choice could be in order as well. –  BLSully Mar 20 at 13:59
    
This might help? jsfiddle.net/Arashk/JDS2U/12 –  bookthief Apr 10 at 15:53
add comment

1 Answer

To expand on my comment:

Directive html:

<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<input type="text" ng-model="choice.name" name="" placeholder="Enter a new data point" />         
<br>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>

Primary content:

<div class="form-group" ng-controller="Controller">
  <form novalidate class="simple-form">
    Title of Chart: <input type="text" ng-model="chart.title" /><br />
    Series Name: <input type="text" ng-model="chart.series" /><br />
    Series Data: <input type="text" ng-model="series.data" /><br>
    <button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>

    <div choice-editor ng-repeat="c in choices" choice="c"></div>
 </form>

I'm very fuzzy on the best practices with directives. it seems like I mix too much into a single directive sometimes, i.e., i'm not sure if you want the ng-repeat and choice attributes on the same element... Maybe someone else can improve this answer. But that should give you some ideas of how to proceed, hopefully.

share|improve this answer
    
Thank you for the comment! I'm a beginner too. So your comment made me think of this: Maybe what I need is the hg-repeat div only around what I truly want repeated: which created this - '<div data-ng-repeat="choice in choices"> <input type="text" ng- model="choice.name" name="data_point" placeholder="Enter a new data point"> </div>' Unfortunately, it did not work how I thought it would. I'm still not creating another text box to input more data. –  user3442320 Mar 21 at 15:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.