2017-04-04 10 views
0

スコープ変数、ng-repeat divタグ(基本的にテーブル)への配列をバインドします。 配列にデータを動的に追加すると機能します!行がテーブルに追加されます。Angular jsスコープ変数(配列)の変更がng-repeatに反映されない

しかし、配列から要素を削除すると、その変更はテーブルに反映されません。 1つの行を削除する必要があります。続き

は、私は(Javascriptを)で働いているコードです:

$scope.myfields = []; 
    $scope.addField = function() { 
     $scope.myfields.push({ "name": "", "type": "", "required": "", "enum": "" }); 
     console.log("add: " + $scope.myfields.length); 
     console.log(JSON.stringify($scope.myfields)); 
    } 

    $scope.removeField = function (index) { 
     $scope.myfields.splice(index, 1); 
     console.log("remove: " + $scope.myfields.length); 
     console.log(JSON.stringify($scope.myfields)); 
    } 

EJS:以下を参照してください!

奇妙なことは、 コンソールログでは、$ scope変数に期待通りに変更が加えられ、view(table)のみが更新されていないと表示されます。 もし私が "$ index by track"を置かないなら、テーブルに反映された両方の停止を追加して削除してください!

助けてください。ありがとう!

EDIT 2: あなたが求めているコード:

<div class="col-md-12"> 
        <p style="text-align:center"><strong>DEFINE CUSTOM FIELDS:</strong></p> 
        <br> 
        <div style="text-align:center"> 
         Click on '+' button to add custom field: 
         <div class="fa fa-plus-circle" ng-click='addField()'> </div> 
         <div class="fa fa-minus-circle" ng-click='removeField(0)'> </div> 
        </div> 
        <br> 
        <div data-responsive-table> 
         <table data-table> 
          <thead > 
          <tr > 
           <th data-event='sort'> 
           Field Name 
           </th> 
           <th data-event='sort'> 
           Type 
           </th> 
           <th data-event='sort'> 
           Is Required? 
           </th> 
           <th data-event='sort'> 
           Enumeration 
           </th> 
          </tr> 
          </thead> 
          <tbody > 
          <tr data-parent-row ng-repeat="um in dynamicFields track by $index"> 
           <td> 
            <input placeholder="Name" ng-model="um.name" validation="required" > 
           </td> 
           <td> 
            <select style='height: 45px;' ng-model="um.type" > 
             <option value="string">string</option> 
             <option value="boolean">boolean</option> 
             <option value="integer">integer</option> 
            </select> 
           </td> 
           <td> 
            <select style='height: 45px;' ng-model="um.required" > 
             <option value="true">true</option> 
             <option value="false">false</option> 
            </select> 
           </td> 
           <td> 
            <input placeholder="Enum" ng-model="um.enum" validation="required" > 
           </td> 
          </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
+0

に投稿してください。 micFields array – Karim

+0

ng-clickでremoveField関数をどのようにトリガーしますか? –

+0

コードは正常です。呼び出し元のremoveFieldのコードを表示します。 –

答えて

1

あなたNG-繰り返しで変数名がmyfieldsなくdynamicfields

である必要があり、あなたのコントローラで、それはあなたの中に、$scope.myfieldsあるので、あなたがremoveField()とaddField()を呼び出すコードとdynaを定義するコードを投稿するコードを

ng-repeat="um in myfields track by $index" 
+0

これは編集問題のミスであり、名前はコード内で同じです –

関連する問題