Javascript 无法在AngularJS中从数组中添加或删除元素_Javascript_Angularjs

Javascript 无法在AngularJS中从数组中添加或删除元素

javascript angularjs

Javascript 无法在AngularJS中从数组中添加或删除元素,javascript,angularjs,Javascript,Angularjs,你好：我在AngularJS里湿了脚。我试图在数组中添加和删除元素；然而，我无法达到预期的效果 foll是JSON结构： $scope.masters = [ { "name": "Wittgenstein", "thoughts": ["thought 1", "thought 2", "thought 3"] }, { "name": "King", "thoughts": ["thought 1", "thought 2", "thought 3"] } ];

你好：我在AngularJS里湿了脚。我试图在数组中添加和删除元素；然而，我无法达到预期的效果

foll是JSON结构：

    $scope.masters = [
    {
"name": "Wittgenstein",
"thoughts": ["thought 1", "thought 2", "thought 3"]

},

{
"name": "King",
"thoughts": ["thought 1", "thought 2", "thought 3"]

}
  ];

富利人是劫掠者

非常感谢您的任何意见。谢谢。

您需要指定母版的索引。在删除函数中应该可以使用类似的功能：

$scope.masters[masterIndex].thoughts.splice(index, 1);

如果masterIndex是您希望从@Mathew建议的中删除思想的master的索引，您应该介绍

$index

的用法，如下所示：

JS代码：

$scope.input = [];

$scope.add = function(i) { // receiving index as param
    $scope.masters[i].thoughts.push($scope.input[i]);
    $scope.input[i] = '';
};

<div ng-repeat="master in masters">
  <h1>{{ master.name }}</h1>
  <ul>
    <li ng-repeat="thought in master.thoughts">
      {{ thought }} <button ng-click="remove($index)">Remove</button>
    </li>
  </ul>
  <input type="text" ng-model="input[$index]">
  <button type="submit" ng-click="add($index)">Add</button>
</div>

HTML代码：

$scope.input = [];

$scope.add = function(i) { // receiving index as param
    $scope.masters[i].thoughts.push($scope.input[i]);
    $scope.input[i] = '';
};

<div ng-repeat="master in masters">
  <h1>{{ master.name }}</h1>
  <ul>
    <li ng-repeat="thought in master.thoughts">
      {{ thought }} <button ng-click="remove($index)">Remove</button>
    </li>
  </ul>
  <input type="text" ng-model="input[$index]">
  <button type="submit" ng-click="add($index)">Add</button>
</div>


{{master.name}}


{{思考}}删除


添加

请参见此
这是您的plnkr的更新版本

<!DOCTYPE html> <html ng-app="app"> <head> <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="demoController"> <div ng-repeat="master in masters track by $index"> <h1>{{ master.name }}</h1> <ul> <li ng-repeat="thought in master.thoughts track by $index"> {{ thought }} <button ng-click="remove(master, $index)">Remove</button> </li> </ul> <input type="text" ng-model="input[$index]"> <button type="submit" ng-click="add($index)">Add</button> </div> </body> </html>
add函数似乎没有从输入模型中选取值，但这应该是一个绑定问题，而不是函数不能正常工作

我希望这会有所帮助。
问题是您需要将主控文件的索引传递给添加和删除函数。因为你这样做：

$scope.masters.thoughts.splice(index, 1);
但是masters是一个数组，因此您需要在该数组中选择一个对象，例如

$scope.remove = function(masterIndex, thoughtsIndex) { $scope.masters[masterIndex].thoughts.splice(thoughtsIndex, 1); };
要在HTML中实现这一点，必须在内部索引中使用父索引

<div ng-repeat="master in masters"> <h1>{{ master.name }}</h1> <ul> <li ng-repeat="thought in master.thoughts"> {{ thought }} <button ng-click="remove($patent.index, $index)"> Remove </button> </li> </ul> <input type="text" ng-model="input"> <button type="submit" ng-click="add($index)">Add</button> </div>

{{master.name}} {{思考} 去除添加

在Add函数中，您必须执行相同的操作才能成为masters数组的$index。
@Matthew您的意思是这样的sthg；尽管它也不起作用：
$scope.add=function（）{$scope.masters.thinks[$index].push（$scope.input）；$scope.input='''；}我也试过：$scope.remove=function（index）{var index=$scope.masters.indexOf（master）；$scope.masters[masterIndex].think.splice（index，1）；}好的。。所以我们需要使用索引来处理嵌套数组。现在我似乎在应用类似的逻辑来删除一个想法，但它似乎不起作用。。我可能会错过什么<代码>$scope.remove=function（i）{$scope.masters[i].thinks[i].splice（index，1）；}啊。。我的论点是错误的。它现在可以工作了$scope.remove=function（master，i）{master.thinks.splice（i，1）；}谢谢Leo，我会逐行浏览你的代码，尝试吸收使用数组的概念。我对你的答案投了赞成票，但没有得到反映，因为我的分数不够。非常感谢你抽出时间来帮助我解决他的问题。我将一行一行地浏览你的代码，尝试吸收使用数组的概念。非常感谢。我对你的答案投了赞成票，但没有得到反映，因为我没有足够的分数。