无法从范围数组AngularJS中删除元素

Posted

技术标签:

【中文标题】无法从范围数组AngularJS中删除元素【英文标题】：Can't remove element from scope array AngularJS 【发布时间】：2014-10-16 17:47:44 【问题描述】：

我通过ui-router 获得了几个视图，并且有一个我在其中存储一些输入值的范围。用户可以在一个视图中输入信息并转到下一步，也可以跳过该步骤（并删除范围内输入的所有数据）并转到下一步。

我尝试了多种方法来尝试通过 $scope 函数和拼接来删除元素，但我不断收到 TypeError - 我知道缺少某些东西，但我似乎无法确定它。如果能得到任何帮助，我将不胜感激！

错误：

TypeError: undefined is not a function
at Scope.$scope.remove (http://localhost:9000/scripts/app.js:27:32)
at http://localhost:9000/bower_components/angular/angular.js:10567:21
at http://localhost:9000/bower_components/angular/angular.js:18627:17
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12412:28)
at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12510:23)
at htmlButtonElement.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:18626:21)
at http://localhost:9000/bower_components/angular/angular.js:2780:10
at forEach (http://localhost:9000/bower_components/angular/angular.js:330:20)
at HTMLButtonElement.eventHandler (http://localhost:9000/bower_components/angular/angular.js:2779:5) angular.js:9778
    (anonymous function) angular.js:9778
    (anonymous function) angular.js:7216
    Scope.$apply angular.js:12512
    (anonymous function) angular.js:18626
    (anonymous function) angular.js:2780
    forEach angular.js:330
    eventHandler angular.js:2779

Index.html

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="testappApp">

<!-- Add your site or application content here -->
<div class="container">
    <div ui-view></div>

</div>

<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->

    <!-- build:js(.tmp,app) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <!-- endbuild -->
</body>
</html>

page1.html

<div class="jumbotron">
<h1>Page 1</h1>
<input type="text" ng-model="datas.veggie" placeholder="favorite veggie">
<a ui-sref="two">
Next
</a>
<button data-ng-click="remove(datas.veggie)">
Skip
</button>
<pre>
datas
</pre>
</div>

page2.html

<div class="jumbotron">
<h1>Page 2</h1>
<input type="text" ng-model="datas.color" placeholder="favorite color">
<a ui-sref="one">
Back
</a>
<button data-ng-click="remove(datas.color)">
Skip
</button>
<pre>
datas
</pre>
</div>

app.js

'use strict';

angular
  .module('testappApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider)
    $stateProvider.state('one', 
        url: '/one',
        templateUrl: 'views/page1.html',
        controller: 'mainController'
    ).state('two', 
        url: '/two',
        templateUrl: 'views/page2.html'
    );
    $urlRouterProvider.otherwise('/one');
  ).controller('mainController', function($scope, $http) 

    $scope.datas = 'veggie':'none','color':'blue';

    $scope.remove = function(whichone)
        var idx = $scope.datas.indexOf(whichone);
        $scope.datas.splice(idx,1);
    ;

);

【问题讨论】：

【参考方案1】：

$scope.datas 是一个对象字面量，因此没有 indexOf 或 splice 方法。

如果您想通过键从对象中删除属性，您可以使用类似以下的内容。

$scope.remove = function(key)
    if($scope.datas.hasOwnProperty(key))
        delete $scope.datas[key];
    
;

【讨论】：

没有indexOf 或splice 的对象文字是有道理的，谢谢！但是，hasOwnProperty(key) 不会评估 true 或抛出错误。我试过&lt;button data-ng-click="remove(veggie)"&gt; 和&lt;button data-ng-click="remove(datas.veggie)"&gt;。我没有看到任何关于角度删除的信息，只有从数组中删除的拼接方法，这就是我一直在尝试这样的原因：link key 在您的示例中需要是'veggie' 或'color' 的字符串值才能返回true，delete 不是角度的一部分，而是一个javacript 关键字从对象中删除一个属性。如果您想使用indexOf 和splice，则需要将$scope.datas 从对象更改为数组。 那太好了，谢谢你容忍我的菜鸟。

以上是关于无法从范围数组AngularJS中删除元素的主要内容，如果未能解决你的问题，请参考以下文章

SwiftUI - 致命错误：从数组中删除元素时索引超出范围

angularJs获取复选框中id 进行批量删除

如何从数组angularjs中删除项目？

AngularJS自定义验证指令 - 如何避免使用隔离范围

删除最后一个数组元素时，SwiftUI列表ForEach索引超出范围

如何使用 AngularJS 输出 JSON 数组中的元素