如何动态地向ng-table添加新行,该行应该包含四个输入框

时间:2016-07-18 07:53:53

标签: html angularjs

最初我可能有一些ng-table行,我需要在单击addrow按钮时添加一行。该行应包含输入框,并且该行应仅属于该ng-table ..

1 个答案:

答案 0 :(得分:0)

表然后你可以推动另外一个对象,同时你点击添加行来增加参考https://plnkr.co/edit/vOYNz80UAaDaFq2VImfU?p=preview

<强> HTML

 <button ng-click="addrow()">Add Row</button>
    <table ng-table="vm.tableParams" class="table" >
      <thead>
      <th> Firstname </th>
       <th> Lasttname </th>
       </thead>
    <tr ng-repeat="user in users">
        <td title="'Name'" >
            <input ng-model="user.first_name" /></td>
        <td title="'Age'" >
          <input ng-model="user.last_name" />
          </td>
    </tr>
</table>

<强> JS

$scope.users = [{
        "id": 1,
        "first_name": "Philip",
        "last_name": "Kim",
        "email": "pkim0@mediafire.com",
        "country": "Indonesia",
        "ip_address": "29.107.35.8"
    }, {
        "id": 2,
        "first_name": "Judith",
        "last_name": "Austin",
        "email": "jaustin1@mapquest.com",
        "country": "China",
        "ip_address": "173.65.94.30"
    }, {
        "id": 3,
        "first_name": "Julie",
        "last_name": "Wells",
        "email": "jwells2@illinois.edu",
        "country": "Finland",
        "ip_address": "9.100.80.145"
    }, {
        "id": 4,
        "first_name": "Gloria",
        "last_name": "Greene",
        "email": "ggreene3@blogs.com",
        "country": "Indonesia",
        "ip_address": "69.115.85.157"
    }, {
        "id": 50,
        "first_name": "Andrea",
        "last_name": "Greene",
        "email": "agreene4@fda.gov",
        "country": "Russia",
        "ip_address": "128.72.13.52"
    }];

    $scope.addrow = function() {
      var obj = {
        "id": "",
        "first_name": "",
        "last_name": "",
        "email": "",
        "country": "",
        "ip_address": ""

      }
      $scope.users.push(obj)
    }