使用angularjs獲取動態創建的錶行值的值

我是angularjs中的新手。我有一張桌子，需要動態添加一些行。一切工作都很好，還有一點JQuery。但是，當我嘗試獲取動態創建的表格行的值時，它不起作用。我的代碼在這裏。請幫忙。使用angularjs獲取動態創建的錶行值的值

<div ng-app="Myapp"> 
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> 
    <script> 
     var Myapp = angular.module('Myapp', ["ngRoute"]); 
    </script> 

    <div ng-controller="orderFormController"> 
     <table id="item_table"> 
      <thead> 
       <tr class="headings"> 
        <th class="column-title">Item </th>    
        <th class="column-title">Rate</th>       

        </th> 

       </tr> 
      </thead> 

      <tbody> 
       <tr> 
        <td>   
         <input type="text" name="item" ng-model='item[0]'> 
        </td> 

        <td class=" "><input type="text" name="rate" ng-model='rate[0]'> </td> 
        <td class=" "><a onclick="addrow()">add(+)</a> </td> 
       </tr> 

      </tbody> 

     </table> 
     <button type="button" ng-click='saveorder()' >SAVE ORDER</button> 
    </div>  
    <script> 
     Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) { 
       var data = {}; 
       data['item'] = []; 
       $scope.item = ''; 
       $scope.rate = ''; 
       $scope.saveorder = function() { 
        var row_count = $('#item_table tr').length; 
        for (i = 1; i <= row_count; i++) { 
         data['item'][i] = {'item': $scope.item[i], 'rate': $scope.rate[i]} 

        } 
        alert($scope.item[0]); 
        alert($scope.item[1]); 
       } 

      }]); 
     function addrow() { 
      var row = $('#item_table tr').length + 1; 
      var row_string = '<tr><td><input type="text" name="item" ng-model="item[' + row + ']"></td><td class=" "><input type="text" name="rate" ng-model="rate['+ row +']"> </td><td class=" "><a onclick="addrow()">add(+)</a> </td></tr>'; 
      $('#item_table tbody').append(row_string); 
     } 
    </script>

來源

2015-11-20 nervartha

這是不是非常像角..另一種方式來實現這一目標是使用NG重複的項目列表上「的R率」。當您添加行，只需附加一個新元素進行評分。你總是會參考「r」中的行 – MayK

您可以對它使用ng-repeat指令。你可以檢查鏈接。它可能會幫助你。在控制器中，你可以像這樣寫入來添加一行。

$scope.rows.forEach(function (row) { 
     console.log('row #' + (index++) + ': ' + JSON.stringify(row)); 
    });

http://jsfiddle.net/shardulpendse/qbdrt00a/1/

來源

2015-11-20 06:21:50

要獲得動態添加行的值的表，使用：

$('table#item_table tbody').on('click', function(e){ 
     e.preventDefault(); 
     // select new row added by class or id 
     do your stuff here... 
    });

來源

2015-11-20 06:12:09

我認爲你必須使用$ element.append之後編譯。

你可以嘗試這樣的事情：

var row = $('#item_table tr').length + 1; 
var row_string = '<tr><td><input type="text" name="item" ng-model="item[' + row + ']"></td><td class=" "><input type="text" name="rate" ng-model="rate['+ row +']"> </td><td class=" "><a onclick="addrow()">add(+)</a> </td></tr>'; 

var newRow= angular.element(row_string); 
$('#item_table tbody').append(newRow); 
$compile(newRow)($scope);

來源

2015-11-20 06:12:49

必須有兩個變化：

移動功能addrow（）中的控制器一樣

$ scope.addrow =功能（）{ }

並用ng-click打電話
使用$編譯像append方法：

$（ '＃item_table TBODY'）追加（$編譯（row_string）（$範圍））;

然後嘗試，它應該工作正常。

來源

2015-11-20 06:13:36 Rahul

使用angularjs獲取動態創建的錶行值的值

回答

相關問題