Ligando inputs a uma matriz de primitivos usando ngRepeat => inputs não editáveis

Aqui está uma demonstração para o meu problema.

$scope.myNumbers = [10, 20, 30]; 
current scope: {{num}}

Alguém pode me explicar por que as inputs são não editáveis ​​/ somente leitura? Se é por design, qual é a razão por trás?

ATUALIZAÇÃO 2/20/2014

Parece que isso não é mais um problema para a v1.2.0 + Demo . Mas tenha em mente que, embora os controles do usuário agora sejam editáveis ​​com as versões mais recentes do angularJS, é a propriedade num nos escopos filho , não no escopo pai, que é modificada. Em outras palavras, modificar os valores nos controles de usuário não afeta a matriz myNumbers .

Alguém pode me explicar por que as inputs são não editáveis ​​/ somente leitura? Se é por design, qual é a razão por trás?

É por design, como de 1.0.3 angular . Artem tem uma explicação muito boa de como o 1.0.3+ funciona quando você “liga a cada item de repetição do ng diretamente” – ou seja,

 

Quando sua página renderiza inicialmente, aqui está uma foto de seus escopos (eu removi um dos elementos da matriz, para que a imagem tivesse menos checkboxs):

insira a descrição da imagem aqui (Clique para ampliar)

Linhas tracejadas mostram inheritance de escopo prototípico.
Linhas cinzas mostram relações filho → pai (ou seja, quais referências $parent ).
Linhas marrons mostram $$ nextSibling.
Caixas cinzentas são valores primitivos. Caixas azuis são matrizes. Roxo são objects.

Observe que a resposta SO que você mencionou em um comentário foi escrita antes de 1.0.3 ser lançada. Antes de 1.0.3, os valores num nos escopos filho ngRepeat seriam realmente alterados quando você digitasse nas checkboxs de texto. (Esses valores não seriam visíveis no escopo pai.) Desde 1.0.3, ngRepeat agora substitui os valores num escopo ngRepeat pelos valores (inalterados) do array myNumbers do escopo pai / MainCtrl durante um ciclo de myNumbers . Isso essencialmente torna as inputs não editáveis.

A correção é usar uma matriz de objects no seu MainCtrl:

 $scope.myNumbers = [ {value: 10}, {value: 20} ]; 

e, em seguida, ligue-se à propriedade value do object no ngRepeat:

 
current scope: {{num.value}}

Este problema é agora endereçado por versões mais recentes do AngularJS com a track by recurso permitindo repetidores sobre primitivos:

 

A página não será repintada após cada pressionamento de tecla, o que resolve o problema do foco perdido. O documento oficial do AngularJS é bastante vago e confuso sobre isso.

Parece que Angular não é capaz de escrever para o modelo definido dessa maneira. Use a referência ao atributo initial $ initial para permitir que ele vincule o valor de maneira correta:

 

ngRepeat usa uma referência ao array de origem. Desde integer (Number in js) é um tipo de valor , não um tipo de referência , portanto, não pode ser passado por referência em javascript. A mudança não será propagada.

Aqui está uma demonstração:

  var x = 10; var ox = {value:10}; var y = x; var oy = ox; y = 15 oy.value = 15; 

Quais seriam os valores de x e ox ?

 >> x = 10; >> y = 15; >> ox = {value:15}; >> oy = {value:15}; 

Todos os objects javascript são passados ​​por referência e todos os primitivos são passados ​​pelo valor [“string”, “number”, etc].

Plunker de trabalho http://plnkr.co/edit/7uG2IvAdC2sAEHbdHG58

Eu tive um problema semelhante (e também exigi a funcionalidade ‘add’ e ‘remove’) e resolvi o problema da seguinte forma:

 $scope.topics = ['']; $scope.removeTopic = function(i) { $scope.topics.splice(i, 1); }  Add