Question

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

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

按照以下步骤操作：

将链接（添加和删除）添加到表格的tr中，并将item.id传递给removing该项目，并将whole item传递给{ {1}}该项目作为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>链接。
```
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); } } };链接。
```
Add
```

<强>样本

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

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

AngularJS - 从html向控制器发送变量

3 个答案: