Как получить значение из входного текста, который ng-повторяется Tr?

Question

У меня есть таблица, и ее tr повторяется ng. можно также добавить к нему новую строку, нажав кнопку.

Теперь предположим, что 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> 

My Controller является:

$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» не определяют Тогда для этого сценария, как это должно быть сделано

Answer 1

Для начала, вы не хотите делать Dóm манипуляции в контроллере ,

Если вы хотите $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 
} 

Answer 2

Вы пытались просто получить детали из сферы действия?

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

Answer 3

У вас есть проблема с дизайном, которая становится наиболее очевидной при создании вызова jQuery. В качестве очень сильного эмпирического правила вам не следует манипулировать DOM (в частности, вызовом jQuery) в Angular, особенно в вашем контроллере.

Ваша addnewRow() функция должна выглядеть

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

Тогда вам не нужно даже saveDetails функцию - details автоматически обновляется!

Answer 4

Вам нужно изменить подход.

Функция addnewRow, вместо этого добавление элемента в DOM должно добавлять новые детали к вашему массиву деталей, а угловая обновит вашу таблицу. Данные в таблице представляют $scope.details массив, так что если вы хотите получить в контроллер просто использовать $scope.details

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 
 

 
    } 
 

 

 
});

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