ng-repeatのng-clickが機能に影響しないのはなぜですか？

HTMLのボタンをngクリックすると、クライアントサイドのコントローラファイルで関数を実行しようとしています。何も取得せず、理由がわからない。すべての助けに感謝します。ng-repeatのng-clickが機能に影響しないのはなぜですか？

HTML

<body ng-controller="CriminalsCtrl as criminals"> 
    <h1>Infamous Criminals</h1> 
    <section> 
    <ul id="criminals"> 
     <li ng-repeat="criminals in criminals.criminalArray"> 
     <strong>{{criminals.name}}</strong> <em>{{criminals.location}}</em> 
     <span class="status {{criminals.status}}">{{criminals.status}}</span> 
     <button ng-click="criminals.criminalsDelete(criminal)" class="delete">X</button> 
     </li> 
    </ul>

CONTROLLER

vm.criminalsDelete = criminalsDelete; 

    function criminalsDelete(criminal) { 
    console.log('ng-click'); 
    $http.delete(`http://localhost:4000/api/criminals/${criminal.id}`) 
    .then(() => { 
     const index = vm.criminalArray.indexOf(criminal); 
     vm.criminalArray.splice(index, 1); 
    }); 
    }

出典

2017-08-01 Chris Catley

controllerAs構文についてcriminals名前はng-repeatイテレータのためのcriminals名前によって隠されています。私はたとえば、あなたのための完全なCRUDを作っ削除するためのコントローラは、最高の

 $scope.delete = function(index){ 
    $scope.Criminals.splice(index,1); 
}

あるコードのこの形

<body ng-controller="CriminalsCtrl as criminals"> 
    <h1>Infamous Criminals</h1> 
    <section> 
    <ul id="criminals"> 
     <li ng-repeat="perp ̶c̶r̶i̶m̶i̶n̶a̶l̶s̶ in criminals.criminalArray"> 
     <strong>{{perp.name}}</strong> <em>{{perp.location}}</em> 
     <span class="status {{perp.status}}">{{perp.status}}</span> 
     <button ng-click="criminals.criminalsDelete(perp)" class="delete">X</button> 
     </li> 
    </ul>

出典

2017-08-01 18:50:36 georgeawg

私もちょうど混乱を避けるためにも何か他のものへのIDの名前を変更します。ナイスキャッチ！ – Naomi

ありがとう！ –

、あなただけのHTTPサービスを配置する必要があります：イテレータのために何か他のものを使用します。

以下のスニペットをご覧ください。

angular.module('App', []).controller('CrudCriminal', ['$scope', 
 
\t function($scope) { 
 
\t $scope.Criminals = [ 
 
\t  { 
 
\t   name : "walter", 
 
\t   location : "abq", 
 
\t   status : "dead", 
 
\t   editable : false 
 
\t  }, 
 
\t  { 
 
\t   name : "Jesse", 
 
\t   location : "nebraska", 
 
\t   status : "out", 
 
\t   editable : false 
 
\t  } 
 
\t  ]; 
 
\t 
 
\t $scope.entity = {} 
 
\t  
 
\t $scope.edit = function(index){ 
 
\t $scope.entity = $scope.Criminals[index]; 
 
\t $scope.entity.index = index; 
 
\t $scope.entity.editable = true; 
 
\t } 
 
\t  
 
\t $scope.delete = function(index){ 
 
\t $scope.Criminals.splice(index,1); 
 
\t } 
 
\t  
 
\t $scope.save = function(index){ 
 
\t $scope.Criminals[index].editable = false; 
 
\t  
 
\t } 
 
\t  
 
\t $scope.add = function(){ 
 
\t $scope.Criminals.push({ 
 
\t  name : "", 
 
     location : "", 
 
     status : "", 
 
     editable : true 
 
\t }) 
 
\t } 
 
\t } 
 
]);

/* Styles go here */ 
 
body{ 
 
    margin:10px; 
 
    font-size:14px; 
 
    font-family:Arial; 
 
} 
 
table{ 
 
    border:1px solid #333; 
 
    border-collapse:collapse; 
 
    width:100%; 
 
} 
 
table tr td{ 
 
    border:1px solid #333; 
 
    padding:10px; 
 
} 
 
table tr td span{ 
 
    cursor:pointer; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://code.angularjs.org/1.2.16/angular.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="App"> 
 
    <div ng-controller="CrudCriminal"> 
 
     <h1>Infamous Criminals</h1> 
 
    <table> 
 
     <tr> 
 
     <td>Name</td> 
 
     <td>Location</td> 
 
     <td>Status</td> 
 
     <td><span ng-click="add()">Add New</span></td> 
 
     </tr> 
 
     <tr ng-repeat="criminal in Criminals"> 
 
     <td> 
 
      <input type="text" ng-model="criminal.name" ng-show="criminal.editable"> 
 
      <span ng-hide="criminal.editable">{{ criminal.name }}</span> 
 
     </td> 
 
     <td> 
 
      <input type="text" ng-model="criminal.location" ng-show="criminal.editable"> 
 
      <span ng-hide="criminal.editable">{{ criminal.location }}</span> 
 
     </td> 
 
     <td> 
 
      <input type="text" ng-model="criminal.status" ng-show="criminal.editable"> 
 
      <span ng-hide="criminal.editable">{{ criminal.status }}</span> 
 
     </td> 
 
     <td> 
 
      <span ng-click="edit($index)" ng-hide="criminal.editable">Edit</span> 
 
      <span ng-click="save($index)" ng-show="criminal.editable">Save</span> 
 
      <span ng-click="delete($index)"> | Delete</span> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2017-08-01 19:28:26

ng-repeatのng-clickが機能に影響しないのはなぜですか？

答えて

関連する問題