Question

每次点击添加按钮时，我都会尝试在AngularJS中动态添加表单输入。但是，根据我的代码，输入元素根本不显示。我只是看到＆＃34; Post＆＃34;按钮。如果我删除ng-repeat="ingredient in ingredients"，则表单显示（如预期的那样）。我在这里做错了什么？

以下是index.ejs中的具体代码：

<form ng-model="recipe">
  <div class="form-inline" ng-repeat="ingredient in ingredients">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
    </div>
    <div class="form-group">
      <button type="button" id="add" ng-click="add()">Add</button>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>

这是相应的js代码：

app.controller('MainCtrl', [
'$scope',
'posts',
'auth',
function($scope, posts, auth){
  $scope.ingredients = [];
  $scope.add = function() {
    var newItemNo = $scope.ingredients.length+1;
    $scope.ingredients.push({'id':'choice'+newItemNo});
  };
}]);

Answer 1

那是因为您的按钮位于ng-repeat ed元素中。 ng-repeat重复分配给它的元素中的HTML 。由于ingredients中没有任何项目，因此不会呈现任何内容 - 包括按钮

只需将您的按钮移出<div class="form-inline">。

Answer 2

您的添加按钮位于ng-repeat内部，因此它从未显示过，因此您永远不会填充数组，因此无法显示。这有意义吗？

尝试

<form ng-model="recipe">
  <div class="form-inline" ng-repeat="ingredient in ingredients">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
    </div>
  </div>
  <div class="form-group">
    <button type="button" id="add" ng-click="add()">Add</button>
  </div>
  <button type="submit" class="btn btn-primary">Post</button>
</form>

ng-repeat导致表单元素不显示

2 个答案: