不能从AngularJS的作用域数组中移除元素

Can't remove element from scope array AngularJS

本文关键字：元素 数组 作用域 AngularJS 不能      更新时间：2023-09-26

我通过ui-router获得了几个视图，并且有一个范围，我正在存储一些输入值。用户可以在一个视图中输入信息并进入下一步，也可以跳过该步骤(并删除范围中输入的任何数据)并进入下一步。

我已经尝试了许多方法，试图通过$scope函数和splice删除元素，但我一直得到一个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);
    };
});

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

如果你想通过键从对象中删除一个属性，你可以使用如下代码:

$scope.remove = function(key){
    if($scope.datas.hasOwnProperty(key)){
        delete $scope.datas[key];
    }
};
相关文章：