StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Use</p> <pre><code>row[$index] </code></pre> <p>as the <code>ng:model</code> in the input tag:</p> <pre><code><input type="text" ng-model="row[$index]" style="width: 20px; text-align: center;" /> </code></pre> <p>The reason why this works and using <code>column</code> does not work is this: The <code><input></code> tag will create a child scope by copying the parent scope. But <code>column</code> is a simple/scalar variable. Such a variable will really just be copied. Therefore you end up with a copy in <code>ng:model</code> which is not connected to the real variable in your matrix. This is the reason why the AngularJS people stress that you should always have something with a dot inside referenced by <code>ng-model</code>.</p> <p>On the other hand, <code>row</code> is still a complex variable (Array) and not a scalar. Such a variable is "copied" by JavaScript not by creating a real copy but by just copying the reference to the data. So you end up with a second reference to the same data. And therefore <code>row</code> in the child-scope created by the <code><input></code> tag is still connected to the original row data in the matrix and two-way data-binding will work.</p> <p>To stress this again: Never use something without a dot as <code>ng:model</code>. AngularJS used to have bad examples doing this on their webpage but it appears that they have mostly/all been changed. But as you can see in this example something <code>foo[5]</code> is also ok, because it still references a complex variable. <code>foo["bar"]</code> would actually be equal to <code>foo.bar</code>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload