帶編輯的角度表

我正在嘗試爲項目編輯一個快速的小數據網格指令。這是code sans指令。帶編輯的角度表

HTML

<div>&nbsp;</div> 
<div ng-app="app"> 
    <div ng-controller="ctrl"> 
    <table class=pure-table pure-table-striped> 
     <tr ng-repeat="row in data"> 
     <td ng-repeat="col in row"><input ng-model="col"></td> 
     </tr> 
    </table> 
    <p>{{data}}</p> 
    </div> 
</div>

var app = angular.module('app', []); 

app.controller('ctrl', function ($scope) { 
    $scope.data = [ 
    [100, 200, 300], 
    [400, 500, 600] 
    ]; 
});

CSS

td input { border: none; text-align: right; width: 5em; }

而且codepen：http://codepen.io/mikeward/pen/gwcjt

這個「幾乎」，除了數據模型作品永遠不會updat即使我正在使用雙向綁定（此時它表現爲單向）。這是一個角錯誤還是我只是不理解的東西？

來源

2013-10-03 Mike Ward

寫ng-model="row[$index]"而不是ng-model="col"。

我不確定原因，但是這與表單和輸入的類似問題類似。我相信這個輸入會創建一個子範圍。 col只是一個標量變量，所以當範圍被複制時，副本中的col最終成爲一個完全獨立的變量。因此對col副本的更改將不會更改原始內容。另一方面，row是一個非標量變量，它被「參考」「複製」，因此對輸入row的任何更改也會更改原始的row。

AngularJS的人強調，在ng-model有一個標量變量是做錯了。他們建議ng-model應該有一個點。 row[$index]不包含點，但基本上只是row.$index，其中$index先插值。

來源

2013-10-03 22:17:50

那麼，它的效果會更好，但是在任何輸入控件中鍵入一個字符後，焦點就會離開控件。 –

是的，但如果在編輯之前未添加太多的複製和複製數據，則可能無法更改。您正在更改數據，因此ng-repeat會再次運行。也許http://angular-ui.github.io/ng-grid/會幫助你？ –

黨，所以我的做法是完全有缺陷的。好吧... –

帶編輯的角度表

回答

相關問題