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：＆＃34; vm＆＃34;，那么你的代码将在下面

<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

在控制器中写下以下代码：

System.setProperty("java.util.logging.SimpleFormatter.format", <template>);

在您的HTML中写下如下：

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

形式中未显示的角度动态字段

3 个答案: