動態分配角度模型輸入

Question

我正在嘗試爲角度應用程序創建一個迷你電子表格。我想重新創建 通用電子表格功能，該功能允許用戶單擊電子表格 單元格，然後使用表格頂部較大的輸入更改該單元格的值。 理想情況下，我想在給用戶點擊其中一個單元格時將給定單元格的模型分配給大量輸入即時輸入 ，但我無法解決如何執行此操作。

有一些細節可以解決細胞模糊和焦點問題。另外，我給出的例子大大簡化了;可以有任意數量的行和列。我的主要問題是：如何動態地將單元模型分配給大輸入，以便它可以將 作爲一種代理輸入到單元？如果這不可行/實用，是否有更好的方法來處理這個問題？

這是我到目前爲止。我甚至不知道這是否可行，特別是我在這個指令中採用的方法。有任何想法嗎？

http://plnkr.co/edit/6tTsilCGSepYyCfbvidp?p=preview

的index.html

<table ng-controller="SpreadsheetCtrl" custom-spreadsheet> 
    <thead> 
    <tr> 
     <th colspan="3"> 
     <input type="text" style="width: 100%" /> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in rows"> 
     <td> 
     <input ng-model="row.A" type="text" /> 
     </td> 
     <td> 
     <input ng-model="row.B" type="text" /> 
     </td> 
     <td> 
     <input ng-model="row.C" type="text" /> 
     </td> 
    </tr> 
    </tbody> 
</table> 

的script.js

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

app.controller('SpreadsheetCtrl', function($scope) { 
    $scope.rows = [ 
    {A: 'a', B: 'b', C: 'c'}, 
    {A: 'a', B: 'b', C: 'c'}, 
    {A: 'a', B: 'b', C: 'c'} 
    ]; 
}); 

app.directive('customSpreadsheet', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var primary = element.find('thead input'); 
     element.on('focus', 'tbody input', function() { 
     // of course, this won't work! but it shows the (basic) idea 
     // of what I'm trying to do 
     primary.attr('ng-model', $(this).attr('ng-model')); 
     }); 
    } 
    }; 
}) 

Answer 1

我會折騰指令和利用NG-點擊。這是一個工作PLUNKER。

注

<input ng-model="row.A" type="text" ng-click="choose(row, 'A')"/> 

而且

<input type="text" ng-model="selected[attr]" style="width: 100%" /> 

隨着

$scope.choose = function(row, attr) { 
    $scope.selected = row; 
    $scope.attr = attr; 
}