我通过ui-router获得了几个 View ，并且有一个范围可以在其中存储一些输入值。用户可以在一个 View 中输入信息并转到下一步或者他们可以跳过该步骤(并删除范围内任何输入的数据)并转到下一步。
我尝试了很多方法来尝试通过 $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);
};
});
最佳答案
$scope.datas 是一个对象文字，因此没有 indexOf 或 splice 方法。
如果您想通过键从对象中删除属性，您可以使用类似以下内容的内容。
$scope.remove = function(key){
if($scope.datas.hasOwnProperty(key)){
delete $scope.datas[key];
}
};
关于javascript - 无法从范围数组 AngularJS 中删除元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25454364/