Angular.js仅允许对第一行进行数据更新 [英] Angularjs allows data updates only for the first rows
问题描述
我有一个代码，可以使用angularjs显示json中的三行信息.
I have a code that displays three rows of information from json using angularjs.
现在，我想在表单输入中输入与该行相对应的任何值，以替换该行在视图中已经存在的值.
Now I want if any values entered in the form inputs corresponding to that rows to replace the already existing values in the view for that rows.
例如.在 1 行中，我的子注释变量值为 hello sub 1 .现在，我想要在表单输入中输入另一个值，例如 New sub 1 ，它将替换/更新该行的角度视图"中的现有值.
Eg. In row 1 , I have value hello sub 1 for subcomment Variable. Now I want if I enter another values say New sub 1 in the form inputs on that, it will replace/updates the already existing values in the **angular view ** for that rows.
上面的代码的问题在于，每次输入新的子注释时，它只会继续替换/更新第一行的子注释值.不管单击了保存"按钮
我不知道问题是否出在下面的代码行中
I don't know whether problem is from in the line of code below
$scope.posts[index].comment[0].subcomment = subcomment;
下面是完整的部分工作代码，无论单击哪个提交按钮，该代码始终仅更新第一行
below is the entire partially working code which keeps updating only the first row no matter which submit button that was clicked
html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="testCtrl">
<div ng-repeat='post in posts'>
<b>Post Title:</b> {{ post.title }}
<div ng-repeat='comment in post.comment'>
<br>
<b>sub comment</b>: {{comment.subcomment}}
<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> </td>
<td>
<input type='button' id='but_save' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,$index,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>
js
var app = angular.module('test', []);
app.controller('testCtrl', function ($scope, $http) {
$scope.posts = [
{
"id": "1",
"title": "my first title.",
"comment": [
{
"subcomment": "Hello sub 1"
}
]
},
{
"id": "2",
"title": "my second title.",
"comment": [
{
"subcomment": "Hello sub 2"
}
]
},
{
"id": "3",
"title": "my third title.",
"comment": [
{
"subcomment": "Hello sub 3"
}
]
}
];
//initialize an arrays of comments
$scope.commenting = [];
$scope.setResponse4 = function (postid, type, index, subcomment, commentid) {
var subcomment = subcomment;
alert(subcomment);
$scope.posts[index].comment[0].subcomment = subcomment;
}
});
屏幕截图已附加
推荐答案
代码中的问题是您有2个ng-repeats，而$ index传递了内部ng-repeat的索引，而您需要外部ng-repeat的索引-repeat如果您修改代码以使外部ng-repeat的索引如下，则应该可以解决您的问题.
The problem in your code is you have 2 ng-repeats and $index passes the index of the inner ng-repeat whereas you need the index of the outer ng-repeat if you modify your code to take the index of outer ng-repeat as following, it should solve your issue.
1)首先将此ng-init添加到外部ng-repeat
1) First add this ng-init to your outer ng-repeat
<div ng-repeat='post in posts track by $index' ng-init="outerIndex=$index">
2)在保存功能中使用externalIndex
2) use outerIndex in your save function
<input type='button' id='but_save' value='Save and Replace/Update' ng-click='setResponse4(post.id,1,outerIndex,subcomment,comment.id)'>
Demo
这篇关于Angular.js仅允许对第一行进行数据更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
