AngularJS动态表单

Question

我有一个动态表单函数，如下所示

$scope.ProdLinkFormData = {};
$scope.ProdLinkFormData.link = [{
  link: null,
  price: null,
  priceType: null,
  category: null
}, {
  link: null,
  price: null,
  priceType: null,
  category: null
}];
$scope.addLinkItem = function() {
  $scope.ProdLinkFormData.link.push({
    link: null,
    price: null,
    priceType: null,
    category: null
  });
};

$scope.removeLinkItem = function(linkItem) {
  //console.log(subscriber);
  $scope.ProdLinkFormData.link.pop(linkItem);
};

我的视图包含如下内容

<div id="web" ng-repeat="linkItem in ProdLinkFormData.link">
  <div class="row col-xs-12">
    <div class="col-xs-6">
      <div class="form-group">
        <label class="col-md-6 control-label">*Category: </label>
        <select class="pull-left" id="prodLinkCategory" name="prodLinkCategory" ng-required="true" ng-model="prodLinkNew[$index].category" required/>
        <option ng-repeat="item in scpProdLinkCat" value="{{item.prodlink_category_value}}" ng-selected="prodLinkNew[$index].category==item.prodlink_category_value">{{item.prodlink_category_name}}</option>
        </select>
      </div>
      <div class="form-group">
        <label class="col-md-6 control-label">Price (optional): </label>
        <div class="input-group">
          <div class="input-group-btn">
            <select class="btn btn-primary dropdown-toggle dropdown-toggle-split" name="price" id="price" ng-model="prodLinkNew[$index].price_type">
              <option ng-repeat="item in scpPriceType" value="{{item.pricetype_name}}">{{item.pricetype_name}}</option>
            </select>
          </div>
          <input type="number" class="col-md-1 input-group inline form-control" name="price" id="price" ng-model="prodLinkNew[$index].price" ng-pattern="/^[0-9]+$/" / ng-value="prodLinkNew[$index].price">
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="form-group">
        <label class="col-md-6 control-label">*Product Link EC: </label>
        <div class="col-md-6">
          <input type="text" class="form-control" name="prodEC" ng-required="true" id="prodEC" ng-model="prodLinkNew[$index].Productlink_EC" required/>

        </div>
      </div>
    </div>
  </div>

它相应地显示，但我的问题是，如果我在数据库中有两个数据，那么在页面加载时只有一个数据会显示在表单上，而第二个数据只有在我添加了另一个数据之后才会显示。如何同时显示这两个数据？

Answer 1

​

angular.module('mainApp', [])
.controller('MainCtrl', function($scope){
    $scope.ProdLinkFormData = {};
    $scope.ProdLinkFormData.link = [
            { link: null, price: null, priceType: null, category: null },
            { link: null, price: null, priceType: null, category: null }
    ];
    $scope.addLinkItem = function() {
            $scope.ProdLinkFormData.link.push({ link: null, price: null, priceType: null, category: null });
    };

    $scope.removeLinkItem = function(linkItem) {
        //console.log(subscriber);
        $scope.ProdLinkFormData.link.pop(linkItem);
    };

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div ng-app="mainApp" ng-controller="MainCtrl">

<div id="web" ng-repeat="linkItem in ProdLinkFormData.link">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
    <label class="col-md-6 control-label">*Category: </label>
    <select class="pull-left" id="prodLinkCategory" name="prodLinkCategory" ng-required="true" ng-model="prodLinkNew[$index].category" required/>
       <option ng-repeat="item in scpProdLinkCat" value="{{item.prodlink_category_value}}" ng-selected="prodLinkNew[$index].category==item.prodlink_category_value">{{item.prodlink_category_name}}</option>
    </select>
</div>
<br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Price (optional): </label>
<div class="input-group">
<div class="input-group-btn">
<select class="btn btn-primary dropdown-toggle dropdown-toggle-split" name="price" id="price" ng-model="prodLinkNew[$index].price_type">
    <option ng-repeat="item in scpPriceType" value="{{item.pricetype_name}}">{{item.pricetype_name}}</option>
    </select>
    </div>
<input type="number" class="col-md-1 input-group inline form-control" name="price" id="price" ng-model="prodLinkNew[$index].price" ng-pattern="/^[0-9]+$/"/ ng-value="prodLinkNew[$index].price">
</div>
</div>
<br/><br/>
</div>
    <div class="col-xs-6">
    <br/><br/>
    <div class="form-group">
        <label class="col-md-6 control-label">*Product Link EC: </label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="prodEC" ng-required="true" id="prodEC" ng-model="prodLinkNew[$index].Productlink_EC" required/>

</div>
</div>
</div>
    <br/><br/>
            </div>
            <br/><br/>
    </div>
        </div>

</div>

​

只需复制和粘贴您的代码，并围绕它添加一个模块，它就会像预期的那样将两个条目加载到ng-repeat的视图中。

验证从服务器返回的数据，如果您希望将其粘贴到链接属性数组中，请将其粘贴到此处。

Answer 2

如果我理解你的问题

首先，您有一个来自api的新数组例如has 2

• should您想要在单击add时显示first form

• ，应该添加第二个form

• 此示例是动态的您可以在n中添加n对象

​

'use strict';
var app = angular.module('app', []);

app.controller("ctrl", function ($scope) {
    $scope.apiArray = [
        {
            num: 1,
        },
        {
            num: 2,
        }];
    //create new model
    $scope.newArray = [];
    
    $scope.newArray.push($scope.apiArray[0]);
    
    $scope.add = function () {
        var apiArrayLength = $scope.apiArray.length - 1;
        var newArrLength = $scope.newArray.length - 1;
        if (newArrLength < apiArrayLength) {
            $scope.newArray.push($scope.apiArray[newArrLength + 1])
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div ng-app="app" ng-controller="ctrl">
  <div class="col-lg-4 col-lg-offset-4">
    <br>
    <br>
    <div class="alert alert-info">
      <b>apiArray</b> length is {{apiArray.length}}, we can add just {{apiArray.length}} form in <b>newArray</b>, form 1 is default added to newArray
    </div>
    <button ng-click="add()" class="btn btn-primary">add</button>
    <div class="clearfix"></div>
    <hr>
    <div class="col-lg-12" ng-repeat="linkItem in newArray">
      <div class="well">
        form {{linkItem.num}}
      </div>
    </div>
  </div>
</div>

​