Angular Dynamic Field in Form nicht in Sicht

Question

Dies ist verwirrend. Es ist so einfach, aber ich kann es nicht zur Arbeit bringen. Ich füge dem Formular per Knopfdruck ein Eingabefeld hinzu (ursprünglich). An diesem Punkt bin ich nur versucht, einen Wert in der Ansicht zu sehen (daher der einfache p-Tag)

HTML VIEW

<span>Add secondary field</span> 
<md-button class="md-fab md-mini" ng-click="vm.addVals()"> 
    <i class="material-icons">add</i> 
</md-button> 

<div ng-if="moreVal"> 
    <div data-ng-repeat="vl in valHolder.valArr track by $index"> 
    <p>My Value: {{vl.myVal}}</p> 
</div> 

-Controller

function EditFormController($scope, $sanitize, ngToast) { 
    var vm = this; 
    vm.addVals = addVals; 
    $scope.valHolder= {valArr: []}; 
    function addVals(){ 
    var ln = $scope.valHolder.valArr.length; 
    $scope.valHolder.valArr.push({myVal: 'Test'+ln}); 
    $scope.moreVal = true; 
    } 
}()); 

Ich habe überprüft, dass valArr is being Bei Klick auf die Schaltfläche werden neue myVal-Werte angezeigt. Aber ich kann nichts in der Ansicht sehen. Das ng-repeat-div ist leer. Warum passiert dies? Ich habe den ganzen Tag nach einer Lösung gesucht, aber das ist so absurd, dass niemand dieses Problem zu haben scheint. Ich weiß nicht, was ich falsch mache. Ich würde wirklich eine Antwort schätzen.

Answer 1

schreiben Code unten in Ihrem Controller:

var self = this; 
self.valHolder= {valArr: []}; 
function addVal(){ 
    var ln = self.valHolder.valArr.length; 
    self.valHolder.valArr.push({myVal: 'Test'+ln}); 
    self.moreVal = true; 
} 

schreiben in Ihren HTML wie unten:

<div ng-if="moreVal"> 
    <div data-ng-repeat="vl in vm.valHolder.valArr track by $index"> 
    <p>My Value: {{vl.myVal}}</p> 
</div> 

Answer 2

Ihre addVal-Funktion wird nicht aufgerufen. Bitte Ihre HTML-Ansicht wechseln

<span>Add secondary field</span> 
<md-button class="md-fab md-mini" ng-click="addVal()"> 
    <i class="material-icons">add</i> 
</md-button> 

<div ng-if="moreVal"> 
    <div data-ng-repeat="vl in valHolder.valArr track by $index"> 
    <p>My Value: {{vl.myVal}}</p> 
</div> 

und Controller-Code in this-

$scope.valHolder = { valArr: [] }; 
$scope.addVal = function() { 
    var ln = $scope.valHolder.valArr.length; 
    $scope.valHolder.valArr.push({ myVal: 'Test' + ln }); 
    $scope.moreVal = true; 
} 

Falls in this- Sie verwenden ControllerAs Syntax und Sie haben controllerAs angegeben: "vm", dann wird Ihr Code sein unter

<span>Add secondary field</span> 
<md-button class="md-fab md-mini" ng-click="vm.addVal()"> 
    <i class="material-icons">add</i> 
</md-button> 

<div ng-if="vm.moreVal"> 
    <div data-ng-repeat="vl in vm.valHolder.valArr track by $index"> 
    <p>My Value: {{vl.myVal}}</p> 
</div> 

und Controller-Code in this-

var self = this; 
self.valHolder = { valArr: [] }; 
self.addVal = function() { 
    var ln = self.valHolder.valArr.length; 
    self.valHolder.valArr.push({ myVal: 'Test' + ln }); 
    self.moreVal = true; 
} 

Answer 3

Sie verwenden ng-click="vm.addVals()" und $scope im Controller.

Ich denke, Sie sollten var vm in Controller auch verwenden. Fügen Sie diese Zeilen:

var vm = this; 
vm = {}; 

und

vm.addVals = addVals;