gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:00:18 24 4
gpt4 key购买 nike

我通过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 是一个对象文字,因此没有 indexOfsplice 方法。

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

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

关于javascript - 无法从范围数组 AngularJS 中删除元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25454364/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com