angularjsのデータを削除するには？

AngularJSでindexOfを使用してデータを削除しようとしました。しかし、remove機能が動作していません。私が間違っていることについて私を助けてください。angularjsのデータを削除するには？

JS：

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

app.controller('myCtrl', ['$scope', '$http', function($scope, $http){ 

$http.get('data.json').success(function(data){ 
    $scope.countries = data; 
}); 

$scope.remove = function(jai) { 
     var i = $scope.countires.indexOf(jai); 
     $scope.countires.splice(i, 1); 
}; 

}]);

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="p02.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 

<ul> 
    <li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove()">&#215;</a></li> 
</ul> 

</body> 
</html>

JSON

[ 
    { 
    "name": "WORLD", 
    "population": 6916183000 
    }, 
    { 
    "name": "More developed regions", 
    "population": 1240935000 
    }, 
    { 
    "name": "Less developed regions", 
    "population": 5675249000 
    }, 
    { 
    "name": "Least developed countries", 
    "population": 838807000 
    }]

出典

2017-03-10 burner

に見える参照してください。国の配列はどのように見えますか？ – Shreejibawa

JSONファイルを更新しました。 – burner

あなたの削除メートルでのparamとして国を追加します。 ethod

<ul> 
    <li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove(country)">&#215;</a></li> 
</ul>

出典

2017-03-10 09:24:51 imprezzeb

それは未定義のエラー 'indexOf'を表示します – burner

あなたのHTTPのdata.dataはデータだけでなく取得する必要があります。 – imprezzeb

ビューでデータを表示することはできますが、削除することはできません。 – burner

私はここで例を作成しました：すべての

(function() { 
 

 
    angular 
 
    .module("app", ["ui.bootstrap"]); 
 

 
    angular 
 
    .module("app") 
 
    .controller("AppController", AppController); 
 

 
    AppController.$inject = ["$scope"]; 
 

 
    function AppController($scope) { 
 
    var vm = this; 
 

 
    vm.remove = remove; 
 

 
    setup(); 
 

 
    function setup(){ 
 
     vm.myArray = loadData(); 
 

 
    } 
 

 

 
    function loadData() { 
 
    return [{ 
 
     "id":0, 
 
     "name":"Scotland" 
 
     }, { 
 
     "id":1, 
 
     "name":"England" 
 
     }, { 
 
     "id":2, 
 
     "name":"Wales" 
 
     }, { 
 
     "id":3, 
 
     "name":"Northern Ireland" 
 
     },{ 
 
     "id":4, 
 
     "name":"France" 
 
     },{ 
 
     "id":5, 
 
     "name":"Italy" 
 
     }, 
 
     ]; 
 
    } 
 
    
 
    
 
    function remove(country){ 
 
     var i = vm.myArray.indexOf(country); 
 
     vm.myArray.splice(i,1); 
 
    } 
 

 

 

 
    } 
 

 

 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="AppController as vm"> 
 
    
 
<div> 
 
     <div class="table-responsive"> 
 
      <table class="table table-bordered"> 
 
       <thead> 
 
        <tr> 
 
         <th class="col-xs-1">ID</th> 
 
         <th class="col-xs-5">Country</th> 
 
         <th class="col-xs-6">Change</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr ng-repeat="item in vm.myArray"> 
 
         <td class="text-center"> 
 
          {{item.id}} 
 
         </td> 
 
         <td> 
 
          {{item.name}} 
 
         </td> 
 
         <td> 
 
         <button class="btn btn-danger" ng-click="vm.remove(item)">Delete</button> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
    </div> 
 
</div> 
 
    
 

 

 
</body> 
 

 
</html>

出典

2017-03-10 09:36:10

まず、重複の場合にtrack by $indexを追加します。今すぐ除去機能の国のインデックスを渡すので、indexOf機能を使用して反復する必要はありません。

だから、HTML、それは次のようになります。

<li ng-repeat='country in countries track by $index'>{{country.name}} - {{country.population}} <a href="javascript:void(0)" ng-click="remove($index)">&#215;</a></li>

そして、あなたの機能で、それは次のようになります。

$scope.remove = function(idx) { 
    $scope.countires.splice(idx, 1); 
};

は、このことができますなら、私に教えてください。あなたの関数呼び出し内NGクリック=「（国）を削除」

<ul> 
     <li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove(country)">&#215;</a></li> 
    </ul>

をパラメータを渡す必要が

出典

2017-03-10 09:45:01 Shreejibawa

は、削除して国を渡すのを忘れように、このhttp://jsfiddle.net/75m7e/2523/

出典

2017-03-10 10:36:56 NNR

angularjsのデータを削除するには？

答えて

関連する問題