AngularJS - 发送一个变量从html到控制器

Question

我有一个问题，我想添加到此表一个添加和删除按钮 但我不知道如何将数据从html发送到json数组内控制器。

This is a screenshot of the app now

的HTML代码：

<table> 
    <div class="search"> 
     <label>search student </label> 
     <input type="text" ng-model="search_query"> 
     <label>search student </label> 
     <select ng-model="order_query"> 
      <option value="id">id</option> 
      <option value="name">name</option> 
      <option value="data">data</option> 
      <option value="grade">grade</option> 
      <option value="subject">subject</option> 
     </select> 
     reverse <input type="checkbox" ng-model="reverse_query" value="reverse"> 
    </div> 
    <tr> 
     <th>student id</th> 
     <th>student name</th> 
     <th>student data</th> 
     <th>student grade</th> 
     <th>student subject</th> 
    </tr> 
    <tr ng-repeat="item in student | filter:search_query | orderBy:order_query:reverse_query"> 
     <td>{{ item.id }}</td> 
     <td>{{ item.name }}</td> 
     <td>{{ item.data }}</td> 
     <td>{{ item.grade }}</td> 
     <td>{{ item.subject }}</td> 
    </tr> 
</table> 

的angularjs代码：

function ListCtrl($scope) 
{  
    $scope.student = json; 
} 

并且json代码：

var json = [ 
    { 
     id:"123",  
     name:"oz", 
     data:"best student", 
     grade:"100", 
     subject:"computer science" 
    }, 
    { 
     id:"1234",  
     name:"avi", 
     data:"only student", 
     grade:"80", 
     subject:"computer science" 
    }, 
    { 
     id:"1235",  
     name:"matan", 
     data:"good student", 
     grade:"90", 
     subject:"computer science" 
    }, 
    { 
     id:"123",  
     name:"oz", 
     data:"best student", 
     grade:"95", 
     subject:"computer science" 
    }, 
    { 
     id:"123",  
     name:"oz", 
     data:"best student", 
     grade:"80", 
     subject:"computer science" 
    }, 
    { 
     id:"123",  
     name:"oz", 
     data:"best student", 
     grade:"50", 
     subject:"computer science" 
    } 
    ]; 

Answer 1

您可以使用下面的代码从数据在HTML中添加和删除项目

$scope.remove = function(item) { 
    for (var i = 0; i < $scope.jsonData.length; i++) { 
     if (item.id == $scope.jsonData[i].id) { 
     $scope.jsonData.splice(i, 1); 
     } 

    } 
    }; 
    $scope.add = function() { 
    var temp = { 
     "id": $scope.jsonData.length++, 
     "name": $scope.name, 
     "data": $scope.data, 
     "grade": $scope.grade, 
     "subject": $scope.subject 
    }; 

    $scope.jsonData.push(temp); 
    $http({ 
     method: 'POST', 
     url: 'data.json',//url to web server 
     headers: { 
      'Content-Type': 'application/json' 
     }, 
     data: $scope.jsonData 

     }) 
     .success(function(data, status, headers, config) { 
     console.log('success'); 
     }) 
     .error(function(data, status, headers, config) { 
     console.log('error failed'); 
     }); 
    } 

你的HTML将

<table> 
    <tr> 
     <th>student id</th> 
     <th>student name</th> 
     <th>student data</th> 
     <th>student grade</th> 
     <th>student subject</th> 
    </tr> 
    <tr ng-repeat="item in jsonData | filter:search_query | orderBy:order_query:reverse_query"> 
     <td>{{ item.id }}</td> 
     <td>{{ item.name }}</td> 
     <td>{{ item.data }}</td> 
     <td>{{ item.grade }}</td> 
     <td>{{ item.subject }}</td> 
     <th> <button ng-click="remove(item)">Remove </button> </th>  
    </tr> 
     <tr> 
     <th>{{count}}</th> 
     <th> <input type="text" ng-model="name" placeholder="student name" /></th> 
     <th> <input type="text" ng-model="data" placeholder="student data" /> </th> 
     <th> <input type="text" ng-model="grade" placeholder="student grade" /> </th> 
     <th> <input type="text" ng-model="subject" placeholder="student subject" /> </th> 
     <th> <button ng-click="add()">Add </button> </th>  

    </tr> 
    </table> 

LIVE DEMO

Answer 2

如果你想编辑或删除表格中的项目，您需要发送ng-repeat项目。在您的例子是item

要删除行，你可以添加一个新th你的表，并将其发送到控制器

<th> <button ng-click="remove(item)">Remove</button> </th>

编辑，添加此行

<th> <button ng-click="edit(item)">Edit</button> </th>

在您的控制器中：

// In order to be able to create a new student, you need 
// need to initialize a ngModel here in your controller and 
// use in your view 
$scope.newStudent = {}; 

// The html could be: 
<form> 
    <label>Id</label> 
    <input type="text" ng-model="newStudent.id"> 

    <label>Name</label> 
    <input type="text" ng-model="newStudent.name"> 

    <label>Data</label> 
    <input type="text" ng-model="newStudent.data"> 

    // As much field as you like following the same pattern 
    // as previous field 
</form> 


$scope.edit = function (itemToEdit) { 
    console.log(itemToEdit); 

    // Here you can change properties of your object and it will 
    // be reflected on your view automatically 
    itemToEdit.name = "New name" 
    itemToEdit.grade = "20 pts" 
    itemToEdit.subject = "New experiment subject" 
} 

$scope.remove = function (itemToDelete) { 
    // This can be tricky, because you are using orderBy, 
    // the index on your table will not match the order of 
    // the item on your student list. You solve this looking 
    // for its index before delete it from your student list 
    var index = $scope.student.findIndex(item => item.id === itemToDelete.id); 

    // Now, you can delete your object by index 
    $scope.student.splice(index, 1); 
} 

$scope.add = function() { 
    // To add a new item, add a item to $scope.students and 
    // it will be reflected on your view automatically 
    // That's all. $scope.newStudent will have all the values 
    // from your form 
    $scope.students.push($scope.newStudent); 
} 

如果您要验证此表单，请检查ngMessages，它很容易使用并且可以根据您的需求进行扩展。

希望它可以帮助你下面的步骤

Answer 3

如下：

1. 同时添加链接（添加&删除）到表的tr并通过item.id为removing的项目，并通过whole item为Adding该项目作为参数进入addItem和removeItem函数。

   <tr ng-repeat="item in student | filter:search_query | orderBy:order_query:reverse_query"> 
   <td>{{ item.id }}</td> 
   <td>{{ item.name }}</td> 
   <td>{{ item.data }}</td> 
   <td>{{ item.grade }}</td> 
   <td>{{ item.subject }}</td> 
   <td><a href="javascript:void(0)" ng-click="addItem(item)">Add</a></td> 
   <td><a href="javascript:void(0)" ng-click="removeItem(item.id)">Remove</a></td> 
   </tr> 
   

2. 在控制器上Remove链接的点击。

   $scope.removeItem = function(itemId) { 
       for (var i = 0; i < $scope.json.length; i++) { 
        if (itemId == $scope.json[i].id) { 
         $scope.json.splice(i, 1); 
        } 
       } 
   }; 
   

3. 在控制器中，点击Add链接。

   $scope.addItem = function(item) { 
       $scope.json.push(item); 
   } 
   

DEMO

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

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.student = [ 
 
    { 
 
     id:"123",  
 
     name:"oz", 
 
     data:"best student", 
 
     grade:"100", 
 
     subject:"computer science" 
 
    }, 
 
    { 
 
     id:"1234",  
 
     name:"avi", 
 
     data:"only student", 
 
     grade:"80", 
 
     subject:"computer science" 
 
    }, 
 
    { 
 
     id:"1235",  
 
     name:"matan", 
 
     data:"good student", 
 
     grade:"90", 
 
     subject:"computer science" 
 
    }, 
 
    { 
 
     id:"123",  
 
     name:"oz", 
 
     data:"best student", 
 
     grade:"95", 
 
     subject:"computer science" 
 
    }, 
 
    { 
 
     id:"123",  
 
     name:"oz", 
 
     data:"best student", 
 
     grade:"80", 
 
     subject:"computer science" 
 
    }, 
 
    { 
 
     id:"123",  
 
     name:"oz", 
 
     data:"best student", 
 
     grade:"50", 
 
     subject:"computer science" 
 
    } 
 
    ]; 
 
    
 
    $scope.json = []; 
 
    
 
    $scope.removeItem = function(itemId) { 
 
     for (var i = 0; i < $scope.json.length; i++) { 
 
     if (itemId == $scope.json[i].id) { 
 
      $scope.json.splice(i, 1); 
 
     } 
 
     } 
 
     console.log($scope.json); 
 
    }; 
 
    
 
    $scope.addItem = function(item) { 
 
     $scope.json.push(item); 
 
     console.log($scope.json); 
 
    } 
 
});

table,th,tr,td { 
 
    border : 1px solid black; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <table> 
 
    <tr> 
 
     <th>student id</th> 
 
     <th>student name</th> 
 
     <th>student data</th> 
 
     <th>student grade</th> 
 
     <th>student subject</th> 
 
     <th>Add</th> 
 
     <th>Remove</th> 
 
    </tr> 
 
    <tr ng-repeat="item in student | filter:search_query | orderBy:order_query:reverse_query"> 
 
     <td>{{ item.id }}</td> 
 
     <td>{{ item.name }}</td> 
 
     <td>{{ item.data }}</td> 
 
     <td>{{ item.grade }}</td> 
 
     <td>{{ item.subject }}</td> 
 
     <td><a href="javascript:void(0)" ng-click="addItem(item)">Add</a></td> 
 
<td><a href="javascript:void(0)" ng-click="removeItem(item.id)">Remove</a></td> 
 
    </tr> 
 
</table> 
 
</div>

要将数据添加到表