Angularjs имеет проблемы с обновлением каждого подкомитета / подпоста введенных данных.
У меня есть файл json, который содержит две записи . Первое сообщение содержит ** три ** подпункта (подкоммента), каждый с кнопкой обновления. второй пост содержит два подпункта (субкоммента) каждый с кнопкой обновления.
Я хотел, чтобы пользователь мог вводить любые значения, соответствующие каждой строке в каждом посте.поэтому новые введенные данные заменят уже существующие данные в угловом представлении js для этой строки.
Проблема заключается в том, что только первая строка каждого подкоммента для этого сообщения обновляется при публикации данных.
Например, в post 1 . Если вы введете значение в первой строке и подтвердите, он обновит уже существующие {{comment.subcomment}} данные первой строки.Если вы введете в строку 2 для того же сообщения 1 , он обновит первый ряд сообщения 1 вместо второго ряда этого сообщения.
Некоторые ученые Stackoverflow, такие как NTP в ссылке ниже Angularjs разрешает обновления данных только для первых строк
предлагаемое решение, что, поскольку код имеет 2 ng-repeats и $index передает индекс внутреннего ng-повторите, тогда как нужен индекс внешнего ng-repeat.Он пришел к выводу, что если один код изменить для получения индекса внешнего ng-repeat следующим образом, это должно решить проблему.
1) Сначала добавьте этот ng-init к вашему внешнему ng-повторить
<div ng-repeat='post in posts track by $index' ng-init="outerIndex=$index">
2) использовать externalIndex в функции сохранения
<input type='button' id='but_save' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,outerIndex,subcomment,comment.id)'>
Но решение, приведенное выше, обновляет только первые введенные значения первой строки подкоммента для каждого сообщения.Если вы введете для строки 2 то же самое, она обновит первую строку этого сообщения вместо второй строки того сообщения, для которого была нажата кнопка.
ниже - код
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.name = 'World';
$scope.posts = [
{
"id": "1",
"title": "my first post title.",
"comment": [
{
"subcomment": "post 1 subcomment 1", "status": "**working**"
},
{
"subcomment": "post 1 subcomment 2", "status": "**Not working**"
},
{
"subcomment": "post 1 sub comment 3", "status": "**Not working**"
}
]
},
{
"id": "2",
"title": "my second post title.",
"comment": [
{
"subcomment": "post 2 subcomment 1", "status": "**working**"
},
{
"subcomment": "post 2 subcomment 2", "status": "**Not working**"
}
]
}
];
$scope.setResponse4 = function (postid, type, index, subcomment, commentid) {
var subcomment = subcomment;
$scope.posts[index].comment[0].subcomment = subcomment;
}
});
html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat='post in posts track by $index' ng-init="outerIndex=$index">
<h3>
<b>Post ID: {{ post.id }}</b>
</h3>
<b>Post Title:</b> {{ post.title }}
<div ng-repeat="comment in post.comment ">
<br>
<b>sub comment</b>: {{comment.subcomment}},
<b>status</b>: {{comment.status}},
<div>
<table>
<tr>
<tr>
<td>Enter subcomment</td>
<td>
<input type='text' ng-model='subcomment' placeholder="Enter Value For subcomment and Save.">
</td>
</tr>
<tr>
<td>
{{outerIndex}}
</td>
<td>
<input type='button' id='but_save' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,outerIndex,subcomment,comment.id)'>
</td>
<td>
<input type='button' style="display:none" ng-init='getComments1(comment.id,5)'>
</td>
</tr>
</table>
</div>
</div>
<hr style="width:100%;font-size:10">
</div>
</body>
</html>