AngularJS：绑定回输入数组答案

【问题标题】：AngularJS: Bind back to array of inputsAngularJS：绑定回输入数组
【发布时间】：2018-07-03 19:28:16
【问题描述】：

我有一个array 或string，我想绑定到inputs 的数组：

HTML：

<ul>
<li class="form-group" ng-repeat="remark in trip.remarks track by $index">
    <label>Remarque {{$index + 1}}:</label>
    <textarea class="form-control" type="text" ng-model="remark"></textarea>
</li>
<hr>
</ul>
<button ng-click="addRemark()" class="btn btn-success" style="width: 100%">Ajouter</button>`

在我的控制器中，我已经初始化了trip 对象，并且绑定确实发生了，但是当我通过textarea 编辑数据时，trip 对象中没有任何变化。

我的控制器是这样编码的：

$scope.trip = productService.getCurrentTrip();

$scope.addRemark = function () {
    $scope.trip.remarks.push("");
}

似乎绑定只从控制器到视图发生，当我单击addRemark 按钮时，确实会出现一个新的textarea。那么谁能告诉我如何绑定回控制器？

注意：

1)我也尝试使用ng-model="trip.remarks[$index]"绑定到这个控制器，但没有用。

2) 我在trip 对象中有其他字段，它们是绑定的并且可以双向工作

【问题讨论】：

标签： javascript html arrays angularjs input

【解决方案1】：

这是一个原型继承示例，您可以进一步探索here。

在您的代码 sn-p 中：

ng-repeat="remark in trip.remarks track by $index"

Ng-repeat 正在为您的行程对象中的每个备注创建一个子作用域，并且由于备注是一种原始类型，因此对其进行的任何修改都会被隐藏/隐藏，并且只会修改子作用域。因此，解决方案是利用“。” lzagkaretos 提到的符号，或者将您的 ng-model 绑定到对象引用，而不是原始（字符串）。

【讨论】：

【解决方案2】：

您需要确保 textarea NgModel 指向相同的引用。为此，请创建一个对象数组，您只需在其中编辑该对象的一个值。

这是一个例子：

angular.module("app",[]).controller("myCtrl", function($scope){

$scope.trip = {};
$scope.trip.remarks = [
{"name": "1", "value": "hello world 1"},
{"name": "2", "value": "hello world 2"},
{"name": "3", "value": "hello world 3"},
];

$scope.test = function(){
  alert($scope.trip.remarks[0].value + " | " + $scope.trip.remarks[1].value + " | " + $scope.trip.remarks[2].value);
};

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>


<div ng-app="app" ng-controller="myCtrl">

ul>
<li class="form-group" ng-repeat="remark in trip.remarks track by $index">
    <label>Remarque {{$index + 1}}:</label>
    <textarea class="form-control" type="text" ng-model="remark.value"></textarea>
</li>
<hr>
</ul>
<button ng-click="test()" class="btn btn-success" style="width: 100%">Ajouter</button>

</div>

【讨论】：

【解决方案3】：

选项 1 应该有效。见working plunker。

ng-model="trip.remarks[$index]"

如果它不适合你，请检查trip对象结构，也许它不像{"remarks":["remark 1","remark 2d"]}那样清晰。

【讨论】：