が動的に私は2つのテキストボックスを持っている簡単なフォームを持っているangularJS

に新しいNG-モデルを追加し、ボックスに入力された値がangularJSを使用してのdivに表示されます。また、jQueryを使用して2つのテキストボックスからなる新しい行をフォームに追加するボタンもあります。これにより、ngモデルにもなります。これらの新しいテキストボックスがdiv要素に値を割り当てるために動作しません。しかしが動的に私は2つのテキストボックスを持っている簡単なフォームを持っているangularJS

。動的にこのテーブルに行を追加して動作させる方法はありますか？

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-モデルが、このような新しい行を追加するにはどうすればよいですか？代わりにjQueryを使用する

出典

2017-08-02 Edward1442

）（scope.apply $を呼び出すようにしてみてください。最後にコンパイルコード –

角+ jQuery = YURGH。 Angularを使用するか、両方を使用するのではなく、jQueryを使用します。 Angularはその場でDOMを生成しますが、jQueryはそれを操作しますが、まったく異なるテクニックです。これらの2つの技術を混在させることで、不器用で複雑でメンテナンスが難しいコードを作成します.1つではなく2つのライブラリを読み込む必要はありません。 –

これは単に角度をつけてのやり方ではありません。 jQueryを取り除くか角を取り除く。 [私はjQueryのバックグラウンドを持っている場合は、「AngularJSで考える」？]強く読んで示唆（https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq= 1） – charlietfl

は、モデルによって定義されるような行を追加する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ボタンは rowList配列に新しいオブジェクトをプッシュ addRow機能を呼び出すために ng-click directiveを使用します。

出典

2017-08-03 09:00:37 georgeawg

が動的に私は2つのテキストボックスを持っている簡単なフォームを持っているangularJS

答えて

関連する問題