Question

//动态表，带插入行和删除。但是当我插入行时，如果第一行有一些信息，当我创建新行时，值会被转移，当我想要一个空的新行时，有人可以帮忙吗？

//表创建

     <html>
  <head>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <style>
      table, th , td {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
      }
      table tr:nth-child(odd) {
      background-color: #f2f2f2;
      }
      table tr:nth-child(even) {
      background-color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div ng-app = "mainApp" ng-controller = "studentController">
      <td>
        <table id="Pessoas">
          <tr>
            <th>Name</th>
            <th>age</th>
            <th>email</th>
            <th>delete</th>
          </tr>
          <tr >
            <td><input size=25 type="text" id="latbox"/></td>
            <td><input size=25 type="text" id="lngbox" /></td>
            <td><input size=25 type="text" id="lngbox" /></td>
            <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
            <input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()"/>
          </tr>
        </table>
      </td>
      </tr>
      </table>
    </div>
    <script>

    // script to delete row
    function deleteRow(row) {
        var i = row.parentNode.parentNode.rowIndex;
        document.getElementById('Pessoas').deleteRow(i);

    }

    // script to insert new row
    function insRow() {
        var x = document.getElementById('Pessoas');
        var new_row = x.rows[1].cloneNode(true);

        x.appendChild(new_row);
    }

    //Data 
    var mainApp = angular.module("mainApp", []);

    mainApp.controller('studentController', function($scope) {
        $scope.student = {

            subjects: [{
                name: 'Diogo',
                age: 70,
                email: 'aaaa@aaa.com'
            }, {
                name: 'Joao',
                age: 80,
                email: 'aaaa@aaa.com'
            }, {
                name: 'maria',
                age: 65,
                email: 'aaaa@aaa.com'
            }, {
                name: 'Rui',
                age: 75,
                email: 'aaaa@aaa.com'
            }, {
                name: 'Ana',
                age: 67,
                email: 'aaaa@aaa.com'
            }],
        };
    });        
    </script>
  </body>
</html>

Answer 1

当然你有值，你正在复制行DOM元素。

混合原生javascript和angular等几乎是一个坏主意。

只需使用ng-repeat：

                             <tr ng-repeat="subject in student.subjects" >
                            <td><input size=25 type="text" ng-model="subject.name" name="latbox"/></td>
                            <td><input size=25 type="text" subject="subject.age" name="lngbox1"/></td>
                            <td><input size=25 type="text" name="lngbox2" /></td>
                            <td><input type="button" id="delPOIbutton" value="Delete" ng-click="deleteRow($index)"/></td>
                            <input type="button" id="addmorePOIbutton" value="Add" ng-click="insRow()"/>
                         </tr>

然后在控制器中：

$scope.insRow = function(){
    $scope.student.subject.push({});//push new empty object this should do the trick
}
  $scope.deleteRow(index)
{
     $scope.student.subject.slice(index,1);// the $index in the html is a vaaraible fron ng-repeat so i can pass it in the js here in order to remove the element. Slice modify the current array, he returns the elements removed.
}

当检测到变化时，角度将自己重绘元素。

注意：我通过 ng-click 更改 onclick 。我按名称更改了id，因为你可能有相同名称的元素，但你没有具有相同id的元素。

angularjs在表格中插入新行

1 个答案: