Angular 表单中的动态字段未显示在视图中

Question

这令人费解。这是一件如此简单的事情，但我无法让它发挥作用。我在单击按钮（最初）时向表单添加了一个输入字段。此时我只是想在视图中查看任何值（因此是简单的 p 标签）

HTML 查看

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

控制器

 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;
  }
 }());

我已经检查过单击按钮时 valArr 正在填充新的 myVal 值。但是我在视图中看不到任何东西。 ng-repeat div 是空的。为什么会这样？我整天都在寻找解决方案，但这太荒谬了，似乎没有人遇到这个问题。不知道我做错了什么。非常感谢您的回答。

Answer 1

您的 addVal 函数没有被调用。请将您的 HTML 视图更改为此-

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

控制器代码到此-

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

如果您使用 ControllerAs 语法并且指定了 controllerAs:"vm"，那么您的代码将在下面

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

控制器代码到此-

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 2

您正在控制器中使用 ng-click="vm.addVals()" 和 $scope。

我认为您也应该在控制器中使用 var vm。添加这些行：

var vm = this;
vm = {};

和

vm.addVals = addVals;

Answer 3

在您的控制器中写入以下代码：

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

在你的HTML中写下如下：

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

Angular 表单中的动态字段未显示在视图中

Angular Dynamic Field in form not showing in view

javascript

angularjs

dynamicform