无法从angularjs中的输入字段中删除对象

Question

我正在尝试从输入字段中删除数据，但它没有删除。

＆＃13;

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function MyCtrl($scope) {
    $scope.items = [
        {
            name: 'item 1',
            id: '4'
        },
        {
            name: 'item 2',
            id: '3'
        },
        {
            name: 'item 3',
            id: '2'
        },
        {
            name: 'item 4',
            id: '1'
        }
    ];
    
    $scope.delete = function (item) {
        $scope.items.splice($scope.items.indexOf(item), 1);
    }
});

＆＃13;

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items | orderBy: 'id'" ng-click="delete(item)">
        <span>
            Hello, {{item.name}}!
        </span>
    </div>
    <input type="text" ng-model="items" />
</div>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>

＆＃13;

＆＃13;

＆＃13;

这是JSFIDDLE。

$scope.delete = function (item) {
        $scope.items.splice($scope.items.indexOf(item), 1);
    }

Answer 1

稍微修改了你的UI。

在此处添加了一个按钮，delete选择了item

只需在输入字段

中提供要删除的项目的名称

＆＃13;

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function MyCtrl($scope) {
    $scope.items = [
        {
            name: 'item 1',
            id: '4'
        },
        {
            name: 'item 2',
            id: '3'
        },
        {
            name: 'item 3',
            id: '2'
        },
        {
            name: 'item 4',
            id: '1'
        }
    ];
    
    $scope.delete = function (item) {
    	for(var x in $scope.items){
      	if($scope.items[x].name == item){
        	$scope.items.splice($scope.items.indexOf($scope.items[x]), 1);
           $scope.toRemove = '' // clear input field after deleting
          }
      }
    }
});

＆＃13;

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="item in items | orderBy: 'id'">
        <span>
            Hello, {{item.name}}!
        </span>
    </div>
    <input type="text" ng-model="toRemove" />
    <button ng-click="delete(toRemove)">delete</button>
  </div>
</div>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>

＆＃13;

＆＃13;

＆＃13;

以下是工作 demo

Answer 2

您的代码存在问题

$scope.delete = function (item) {
     $scope.items.splice($scope.items.indexOf(item), 1);
}
$scope.items.indexOf(item) -- You cannot fetch index of an "object" in an array by directly using "indexOf(item)".

试试这个

$scope.delete = function (item) { 
        // fetch the position of item in items array
        position = $scope.items.map(function(e) { return e.name; }).indexOf(item.name);
        $scope.items.splice(position, 1);
        console.log($scope.items);
  }

Plunker

Answer 3

试试这个，也许这符合你的要求。

＆＃13;

＆＃13;

var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	    $scope.items = [
	                    {name : 'item1', id : '4'},
	                    {name : 'item2', id : '3'},
	                    {name : 'item3', id : '2'},
	                    {name : 'item4', id : '1'}
	                    ];
	    $scope.addTextField = function(name){
	    	$scope.textFiles = name;
	    };
	    $scope.remove = function(item){
	    	for (var i=0; i<$scope.items.length; i++){
	    		if($scope.items[i].name == item){
	    			$scope.items.splice($scope.items.indexOf($scope.items[i]), 1);
	    			$scope.textFiles = '';
	    		}
	    	}
	    };
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
		<div ng-repeat="item in items | orderBy: 'id'" ng-click="addTextField(item.name);">
			Click me {{item.name}}!
		</div>
		<input type="text" ng-model="textFiles"><input type="button" value="X" ng-click="remove(textFiles);">
	</div>

＆＃13;

＆＃13;

＆＃13;