Angular js scope Variable (Array) Änderungen nicht in ng-repeat

Question

Ich binde eine Scope-Variable, ein Array zu ng-repeat div-Tag (eine Tabelle im Grunde). Wenn ich dynamisch Daten zum Array hinzufüge, funktioniert es! Eine Zeile wird zur Tabelle hinzugefügt.

Aber wenn ich ein Element aus dem Array entfernen, spiegelt sich die Änderung nicht in der Tabelle wider. Eine Zeile sollte entfernt werden.

Es folgt der Code, den ich mit (Javascript) gerade arbeite:

$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: siehe unten!

Seltsame Sache ist, In der Konsole Protokoll heißt es, dass Änderungen wie erwartet zu $ ​​Scope-Variable gemacht werden, nur Ansicht (Tabelle) wird nicht aktualisiert. Und wenn ich "track by $ index" nicht setze, fügen Sie beide Stopps in der Tabelle hinzu und entfernen Sie sie!

Jede Hilfe wird geschätzt. Vielen Dank!

EDIT 2: Der Code, den Sie gebeten haben:

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

Answer 1

Der Variablenname in Ihrer ng-repeat sollte Da in Ihrem Controller myfields und nicht dynamicfields

sei es $scope.myfields ist, in Ihrem view it

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