Question

我有一个array string我要绑定到input的数组：

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对象中有其他字段绑定并且双向工作

Answer 1

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

在此处的代码段中：

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

Ng-repeat正在为trip对象中的每个注释创建一个子范围，并且由于remark是一种原始类型，因此对它的任何修改都会被隐藏/隐藏，并且只修改子范围。因此，解决方案是利用“。” lzagkaretos提到的符号，或者将ng-model绑定到对象引用而不是原语（string）。

Answer 2

选项1应该有效。请参阅working plunker。

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

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

Answer 3

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

以下是一个例子：

＆＃13;

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);
};

});

＆＃13;

<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>

＆＃13;

AngularJS：回到输入数组

3 个答案: