動態添加新ng-model到angularJS

我有一個簡單的表單，它有兩個文本框，輸入到框中的值使用angularJS顯示在div中。我也有一個按鈕，它使用jQuery爲表單添加了兩個文本框的新行，這也爲他們提供了他們的ng模型。動態添加新ng-model到angularJS

但是，這些新的文本框不適用於將值分配給div。有沒有一種方法可以動態地將更多的行添加到這個表中並讓它們工作？

HTML：

<table> 
    <tr> 
     <td><input type="text" ng-model="value1a"></td> 
     <td><input type="text" ng-model="value1b"></td> 
    </tr> 
</table> 

<input type="button" value="Add Row" name="addRow"> 

<div> 
    <p>{{value1a}} {{value1b}}</p> 
</div>

的jQuery：

$(document).ready(function() { 
    var count = 2; 

    $('[name="addRow"]').click(function() { 
     $('.table tr:last').after('<tr></tr>'); 
     $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'a"></td>'); 
     $('.table tr:last').append('<td><input type="text" ng-model="value' + count + 'b"></td>'); 

     $('.div').append('<p>{{value' + count + 'a}} {{value' + count +'b}}</p>'); 

     count++; 
    }); 
});

我知道其中的原因可能是因爲可以從頁面加載，它的工作的開始需要，NG-模型，但我如何添加這樣的新行？

來源

2017-08-02 Edward1442

嘗試調用$ scope.apply（）;最後編譯代碼 –

Angular + jQuery = YURGH。使用Angular，或使用jQuery，而不是兩者。 Angular在動態生成DOM，而jQuery操縱它，它們是完全不同的技術。通過混合使用這兩種技術，您將創建笨拙，複雜且不可維護的代碼，更不用說您必須加載兩個庫而不是一個。 –

這根本不是你如何做角度的事情。擺脫jQuery或擺脫角度。強烈建議閱讀[「在AngularJS中思考」，如果我有一個jQuery背景？]（https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq= 1） – charlietfl

代替使用jQuery的，使用ng-repeat directive到如由模型定義添加行：

angular.module("app",[]) 
 
.controller("ctrl", function($scope) { 
 
    var vm = $scope; 
 
    vm.rowList = [{valueA: "itemA", valueB: "itemB"}]; 
 
    vm.addRow = function() { 
 
     vm.rowList.push({}); 
 
    }; 
 
})

<script src="//unpkg.com/angular/angular.js"></script> 
 
<body ng-app="app" ng-controller="ctrl"> 
 
    <table> 
 
    <tr ng-repeat="row in rowList"> 
 
     <td>{{$index}}</td> 
 
     <td><input type="text" ng-model="row.valueA"></td> 
 
     <td><input type="text" ng-model="row.valueB"></td> 
 
    </tr> 
 
    </table> 
 

 
    <input type="button" value="Add Row" name="addRow" 
 
     ng-click="addRow()"> 
 

 
    <div> 
 
    <p ng-repeat="row in rowList"> 
 
    row={{$index}} {{row.valueA}} {{row.valueB}} 
 
    </p> 
 
    </div> 
 
</body>

在上述例子中，是rowList對象的數組。每個對象都爲每一行定義模型。要添加新行，addRow按鈕使用ng-click directive來調用addRow函數，該函數將新對象推送到rowList陣列。

來源

2017-08-03 09:00:37 georgeawg

動態添加新ng-model到angularJS

回答

相關問題