angularjsの入力フィールドからオブジェクトを削除できません

Question

入力フィールドからデータを削除しようとしていますが、削除していません。

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); 
 
    } 
 
});

<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>

ここJSFIDDLEです。

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

Answer 1

あなたのUIを少し変更しました。

はちょうどここに入力フィールドに

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) { 
 
    \t for(var x in $scope.items){ 
 
     \t if($scope.items[x].name == item){ 
 
     \t $scope.items.splice($scope.items.indexOf($scope.items[x]), 1); 
 
      $scope.toRemove = '' // clear input field after deleting 
 
      } 
 
     } 
 
    } 
 
});

<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>

を削除する項目の名が働いてで与えるitem

を選択deleteにそこにボタンを追加しました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

を試してみてくださいです。

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

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