Question

尝试使用单击HTML中的按钮来在客户端控制器文件中运行函数。一无所获，不知道为什么。所有帮助表示赞赏。

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

Answer 1

criminals语法的controllerAs名称被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>

Answer 2

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

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

我为您做了一个完整的CRUD示例，您只需要提供http服务。

请参阅下面的代码段。

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

为什么ng-click的ng-click对功能没有影响？

2 个答案: