Question

我的表格有一个标题数组，我希望这些标题可以编辑：

$scope.headers = ['header 1', 'header 2', 'header 3'];

在我看来，我会这样显示：

<table data-ng-show="showData">
    <tr>
        <th data-ng-repeat="h in headers">
            <input type="text" data-ng-model="h" required/>
        </th>
    </tr>
<!-- data here -->
</table>

它们确实正在显示（文本框内部有适当的文本）。但是，如果我编辑任何文本框，$ scope.headers中的值不会更改。我究竟做错了什么？感谢。

Answer 1

无论是什么，你绑定必须是一个对象（或一个数组，因为我很懒）。这就是如何使双向绑定工作。你可以像评论中提到的那样，或者像这样，例如：

JS：

$scope.headers = [['header 1'], ['header 2'], ['header 3']];

HTML：

<th data-ng-repeat="h in headers">
     <input type="text" data-ng-model="h[0]"></input>
</th>

Answer 2

我们不需要使用索引，如果您将模型更改为包含属性，则可以使用简单的ng模型。

代码段：

控制器代码：

function cntrl($scope){
    console.log("hi");
    $scope.headers = [{head:'header 1'}, {head:'header 2'}, {head:'header 3'}];
}

模板：

<div ng-app>
<div ng-controller="cntrl">
<table>
    <tr>
        <td ng-repeat="h in headers">
            <input ng-model="h.head" />
        </td>
    </tr>
    <tr>
        <td ng-repeat="h in headers">
            {{h.head}}
        </td>
    </tr>
<!-- data here -->
</table>
 </div>
</div>

Example Fiddle

双向绑定到ng-repeat标签中的值

2 个答案: