如何通过Tr重复输入的文本获取值?

时间:2015-03-30 18:56:15

标签: javascript jquery html angularjs

我有一张桌子,它的tr重复了。也可以通过单击按钮为其添加新行。

现在假设tr重复了3次,我们再添加2行并输入一些数据。当我们点击提交按钮时,我们如何在控制器中获取表格的全部数据。

我得到了答案但是我的实际情况是这样的 我的HTML页面就像这样

    <div ng-repeat="details in Information" >
<!--

 my other stuff

-->

<table>
   <thead>
      <tr>
          <th>name</th>
          <th>age</th>
          <th>city</th>
          <th>add</th>
      </tr>
   </thead>
    <tbody>
        <tr ng-repeat="detail in details.personInfo">
            <td><input type="text" ng-model="detail.name" /></td>
            <td><input type="text" ng-model="detail.age" /></td>
            <td><input type="text" ng-model="detail.city" /></td>
            <td><input type="text" ng-model="detail.add" /></td>
            <td><input type="button" ng-click="addnewRow();" /> </td>
        </tr>
    <tbody> 
</table>
<input type="button" ng-click="SaveDetails();" value="SaveDetais"/>

</div>

我的控制器是:

$scope.addnewRow = function(){
    var newRow = "<tr>"+
        "<td><input type='text' ng-model='detail.name' /></td>"+
        "<td><input type='text' ng-model='detail.age' /></td>"+
        "<td><input type='text' ng-model='detail.city' /></td>"+
        "<td><input type='text' ng-model='detail.add' /></td>"+
        "<td><input type='button' ng-click='addnewRow();' /> </td>"+
        "</tr>";

    $("table tbody").append(newRow);

}


$scope.SaveDetails = function(){
  // how i will get all to data from the input fields her
}

现在我如何推送其中的数据。就像我做的那样

$scope.details.personInfo.push({..})

它给我一个错误“personInfo”没有定义 然后针对这种情况应该如何完成

4 个答案:

答案 0 :(得分:1)

这里有一个设计问题,当你进行jQuery调用时,这个问题就变得非常明显了。作为一个非常强大的经验法则你不应该在Angular中操纵DOM(特别是通过调用jQuery),特别是在你的控制器中

您的addnewRow()功能应该是

$scope.addnewRow = function(){
    $scope.details.push({})
}

那么您甚至不需要saveDetails功能 - details会自动更新!

答案 1 :(得分:0)

对于初学者,你不想在控制器中进行dom操作。

如果你想要$scope.SaveDetails(javascript中非构造函数的约定是camelcase),我会做的不是添加标记,而是在details数组中添加一个新条目:

$scope.addnewRow = function(){
    $scope.details.push({SOMEDETAILOBJECT})
}


$scope.SaveDetails = function(){
  //some sort of ajax update call that sends $scope.details
}

答案 2 :(得分:0)

你需要改变一点方法。

函数addnewRow,而不是向DOM添加元素应该向您的详细信息数组添加新的细节,angular将更新您的表。 表格中的数据代表$scope.details数组,因此如果您想进入控制器,请使用$scope.details

&#13;
&#13;
var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {

  function detail(name, age, city, add) {
    this.name = name || "";
    this.age = age || "";
    this.city = city || "";
    this.add = add || "";

    return this;
  }

  $scope.details = [{
    name: "ammin",
    age: "16",
    city: "NY",
    add: "true"
  }, {
    name: "joe",
    age: "80",
    city: "CH",
    add: false
  }];

  $scope.addnewRow = function() {

    var newDetai = new detail()
    $scope.details.push(newDetai)

  }

  $scope.save = function() {

    console.log($scope.details);
    $scope.saved = true

  }


});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <table>
      <thead>
        <tr>
          <th>name</th>
          <th>age</th>
          <th>city</th>
          <th>add</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="detail in details">
          <td>
            <input type="text" ng-model="detail.name" />
          </td>
          <td>
            <input type="text" ng-model="detail.age" />
          </td>
          <td>
            <input type="text" ng-model="detail.city" />
          </td>
          <td>
            <input type="text" ng-model="detail.add" />
          </td>
          <td>
            <input type="button" ng-click="addnewRow();" />
          </td>
        </tr>
        <tbody>
    </table>
    <pre ng-show="saved">Details:{{details| json}}</pre>
    <button ng-click="save()">Save</button>
  </div>
</body>
&#13;
&#13;
&#13;

答案 3 :(得分:-1)

您是否试图从范围中获取详细信息?

$scope.SaveDetails = function(){
    $scope.details
}