为什么ng-click对ng函数没有影响？

尝试在客户端控制器文件中使用ng键单击HTML中的按钮来运行功能。无所事事，不知道为什么。所有帮助赞赏。为什么ng-click对ng函数没有影响？

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>

控制器

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名正在由criminals名称为ng-repeat迭代器隐藏。用别的东西迭代器：

<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

我还要重新命名编号到别的东西也只是为了避免混淆。好的赶上！ – Naomi

非常感谢！ –

的代码这种形式进行删除控制器最好

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

我做了一个完整的CRUD了你一个例子，你只需要把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-click对ng函数没有影响？

回答

相关问题