Question

我通过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);
    };

});

Answer 1

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

如果您想要按键从对象中删除属性，可以使用以下内容。

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

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

1 个答案: