ng-repeat to render empty string

Question

I want to render an array of possible authors as inputs so that which authors are assigned can be edited.

.form-multiple-item(ng-repeat="author in story.authors")
  input(type='text', ng-model="author")

Problem is if I want to add an additional blank input after the existing inputs. How can I do that?

.form-multiple-item(ng-repeat="author in story.authors")
  input(type='text', ng-model="author")
input(type='text', ng-model="author")

For example this wouldn't work as author wouldn't be on the correct scope.

If I have story.authors = [""] I want to render an blank input for the user to fill out. But that wouldn't work either as "" just gets ignored by ng-repeat instead of rendering an empty input to be filled. How do I do I either render an empty input or perhaps get another ng-model somewhere inserted into an array in another scope.

score 1 · Accepted Answer · answered Jul 01 '13 at 01:00

1

I think the Angular way of doing this to "put a dot in your model". Your authors model should be an object instead of a string: { name: '' } With the aforementioned object, you should be able to represent an empty input in your ng-repeat.

The ng-model in the <input> would look like this:

<input type="text" ng-model="author.name" />

answered Jul 01 '13 at 01:00

Sunil D.

17,983
6
53
65

So basically it's necessary to complicate the structure this way? – Harry Jul 01 '13 at 01:23
Well, this should solve the problem b/c the object is not falsy like the empty string is. I think there are some valid reasons, I searched earlier when posting this, but all I found was this [very threatening sounding](http://stackoverflow.com/questions/17178943/does-my-ng-model-really-need-to-have-a-dot-to-avoid-child-scope-problems) question. Though I know I've read it elsewhere. When I refactored some code to do just this, the code seemed more elegant. – Sunil D. Jul 01 '13 at 01:35

score 0 · Answer 2 · answered Jul 28 '13 at 01:29

@Harry You asked why complicate things?

The reason is so that assignments work. The input controller will assign its value to whatever's in "ng-modal". If it's a normal variable, then the link to the original list will be lost. If it's an attribute of an object, then the link is preserved. Consider the two scenarios:

for author in authors:
   author = "joe"

See how authors doesn't get changed?

for author in authors:
   author.name = "joe"

Now the connection is preserved.

Does that make sense?

ng-repeat to render empty string

2 Answers2