Question

在我的角度应用程序中，我有通过ng-repeat的典型表格迭代器。

<table class="table table-bordered table-condensed table-striped">  
    <tbody>
       <tr ng-repeat="assay in assays">
          <td>
          <td key="id">{{assay.id}}</td>
          <td key="source">{{assay.source}}</td>
          <td key="status">{{assay.status}}</td>
        ... etc ...
       </tr>
    </tbody>
</table>

使用按钮，用户在模态对话框中进行更改。这一切都运行正常，但我想用结果更新表中的单个单元格;我有行的ID和字段名称。

如果您有索引，Angular是否可以访问单个单元格，甚至更新整行？目前，我通过从远程服务器刷新所有表数据来实现这一目标......不太理想。

我想我正在寻找类似的东西：

assays[id].status = 'great!'

Answer 1

感谢@JB Nizet上面的评论，我能够实现我想要的目标，我认为它的方式比我前进的方式更为棱角分明。角度数据绑定真的是处理模型/视图更新的好方法

我已经在这里发布了一个简化版本的代码，以防它帮助其他人。我正在使用AngularUI作为模态。

查看

<table class="table table-bordered table-condensed table-striped"> <tbody> <tr ng-repeat="assay in assays"> <td> <td key="id">{{assay.id}}</td> <td key="source">{{assay.source}}</td> <td key="status">{{assay.status}}</td> ... etc ... <button class="btn btn-xs btn-info" ng-click="invokeAssayModal(assay)">Assay</button> </tr> </tbody> </table>

<强>控制器

$scope.invokeAssayModal = (assay) -> $scope.assay = assay modalInstance = $modal.open( templateUrl: '/templates/panel/assay_modal.html' controller: 'AssayModalCtrl' windowClass: 'configure-dialog' resolve: assay: -> $scope.assay ) modalInstance.result.then ((assay) -> $scope.assay = assay return ), -> return

模态视图

<button type="button" class="btn btn-mini btn-success" ng-click="select(primerPair)">Select</button>

模态控制器

$scope.select = (primerPair) -> $scope.assay.source = primerPair.source

Angular - 更新表格单元格

1 个答案: