Question

我想在点击＆＃34;添加＆＃34;表格中添加一行。 button.I我正在尝试使用＆＃34; ng-show＆＃34;指令但该行甚至没有点击＆＃34;添加＆＃34;按钮。请帮我解决一下这个。这是代码 -

home.html -

    <table class="table">
        <thead>
          <tr>
            <th>SNo.</th>
            <th>UserId</th>
            <th>Name</th>
            <th>Share</th>
            <th>Paid</th>
          </tr>
        </thead>
        <tbody ng-repeat="member in members">
           <tr>
             <td>{{member.sNo}}</td>
             <td>{{member.id}}</td>
             <td>{{member.name}}</td>
             <td>{{member.share}}</td>
             <td>{{member.paid}}</td>
           </tr>
           <tr ng-show="show" class="ng-hide"> //the row which is to be added
             <td><span>{{counter}}</span></td>
             <td><input type="text" required ng-model="new.id"></td>
             <td><input type="text" required ng-model="new.name"></td>
             <td><input type="text" required ng-model="new.share"></td>
             <td><input type="text" required ng-model="new.paid"></td>
           </tr>    
       </tbody>
     </table>

    <div><input type="button" value="Add" ng-click="addMember()"/></div>

controller.js -

expmodule.controller('expenseForm', function($scope, sharedProperties) {
 var id, expenses = {};
 $scope.show = false;
 $scope.members = [{
  sNo: "1",
  id: "abc@gmail.com",
  name: "Neha",
  share: 200,
  paid: 400,
 }, {
  sNo: "2",
  id: "xyz@gmail.com",
  name: "Sneha",
  share: 200,
  paid: 400,
}];
$scope.counter = $scope.members.length++;
$scope.addMember = function () {
  $scope.show = true;
  return $scope.newRow = true;
}
});

Answer 1

你正在寻找这样的东西吗？ http://plnkr.co/edit/jxXX5sWhgmYrANV7ieKM?p=preview

问题中提供的代码中有一些不正确的内容。

添加行位于ng-repeat内。因此，将为每个成员添加一个新的添加行。
此外，由于show变量位于ng-repeat内，因此它将是父作用域的子级，并且根据当前逻辑将始终为false。
$scope.counter = $scope.members.length++这会使数组长度增加1，并且数组中的新对象将是未定义的。我想你想在新的添加行中显示计数器。它可以像这样简单地完成 - 添加行中的{{members.length + 1}}，而不是为此创建一个新的范围变量。此外，如果添加新成员，这将始终具有最新值。
addMember函数中的return语句具有赋值操作。

Answer 2

它似乎工作正常（见下面的演示）。

<子> 当然，您应该将ng-repeat="member in members"放置到<tr>而不是<tbody>（除非您想拥有多个tbodies）。

<子> 您应该将$scope.counter = $scope.members.length++;更改为$scope.counter = $scope.members.length + 1;

另请参阅此 short demo 。

如何在点击＆＃34;添加＆＃34;时添加一行angularJS中的按钮

2 个答案: