Javascript 动态地将角度模型指定给输入
我正在尝试为angular应用程序创建一个迷你电子表格。我想重新创造 一种常见的电子表格功能,允许用户单击电子表格 单元格,然后使用工作表顶部较大的输入更改该单元格的值。 理想情况下,我希望将给定单元的模型动态分配给大输入 当用户点击其中一个单元格时,但我很难弄清楚怎么做 通过细胞的模糊和聚焦,有一些更精细的细节需要解决。而且,我给出的例子大大简化了;可以有任意数量的行和列。我的主要问题是:如何动态地将单元格的模型分配给大的输入,以便它可以执行操作 作为单元格的代理输入?如果这不可能/不可行,有没有更好的方法来处理 这就是我目前所拥有的。我甚至不知道这是否可行,特别是我在这个指令中所采取的方法。有什么想法吗 index.htmlJavascript 动态地将角度模型指定给输入,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我正在尝试为angular应用程序创建一个迷你电子表格。我想重新创造 一种常见的电子表格功能,允许用户单击电子表格 单元格,然后使用工作表顶部较大的输入更改该单元格的值。 理想情况下,我希望将给定单元的模型动态分配给大输入 当用户点击其中一个单元格时,但我很难弄清楚怎么做 通过细胞的模糊和聚焦,有一些更精细的细节需要解决。而且,我给出的例子大大简化了;可以有任意数量的行和列。我的主要问题是:如何动态地将单元格的模型分配给大的输入,以便它可以执行操作 作为单元格的代理输入?如果这不可能/不可行,有
<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>
我会抛出指令并使用ng click。这是一张工作票 注
美好的试图永远得到它。是的,范围很难确定,因此也需要保存属性。祝你好运
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'));
});
}
};
})
<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;
}