Generating new fields with AngularJS

Question

I'm trying to generate a new form when an item is pushed into an array. The form is always the same, it just increases by one the conditional count.

Something like this:

<span ng-show="companydata.selectedloc.length == 0">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

<span ng-show="companydata.selectedloc.length == 1">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

<span ng-show="companydata.selectedloc.length == 2">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

Every code block pushes an item into companydata.selectedloc on select (it's an autocomplete select input).

Here's the JS function:

$scope.selectedLocation = function(selected){
    $scope.companydata.selectedloc.push(selected)
}

Being always the same code block, is there some way more elegant to do that than increasing the condition manually and adding as many code blocks as necessary (let's say to a max of 10)?

Meet your friend ng-repeat: docs.angularjs.org/api/ng/directive/ngRepeat — random_user_name
– random_user_name, Commented Jul 19, 2016 at 13:38
@cale_b I worked with ng-repeat, but how do ng-repeat a code block as many times as objects in an unrelated array? — Eric Mitjans
– Eric Mitjans, Commented Jul 19, 2016 at 13:39
Not sure I understand how it's "unrelated" - you have a direct correlation between companydata.selectedloc and the number of inputs, so they seem highly related. The guts of the ng-repeat html do NOT have to pertain to the item that is being repeated over, so based on your html exaple, it would be very straightforward. — random_user_name
– random_user_name, Commented Jul 19, 2016 at 13:42

random_user_name · Accepted Answer · 2016-07-19 14:07:00Z

1

You should take advantage of Angular's built-in ng-repeat directive.

Here's a working Fiddle

Note that in the fiddle, I added track by $index, since I don't know what your selected values are. Note that track by $index has tradeoffs, but is sometimes required to prevent dupes errors being thrown by Angular.

From the fiddle, I declared the companydata variable like so:

$scope.companydata = {
  selectedloc: [] // Initialized with an empty array
}

If you want it to be pre-populated, that's simple enough:

$scope.companydata = {
  selectedloc: [0, 1, 2] // Initialized with valu(es) as needed
}

See this updated Fiddle for a richer example where I've updated it with simulated "location" objects.

<span ng-repeat="loc in companydata.selectedloc">
    <div angucomplete-alt id="ex1"
    selected-object="selectedLocation"
    ></div>
</span>

edited Jul 19, 2016 at 14:07

answered Jul 19, 2016 at 13:58

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Mitjans Over a year ago

Any way to show one element by default without having to duplicate the form? The array is empty on load, but it should already show one code block (at it contains the input to add objects)

Collectives™ on Stack Overflow

Generating new fields with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related