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

如果我理解你的問題

1. 首先，您有一個來自api的新數組，例如有2個對象
2. 第二個要顯示的第一個表格
3. 當您單擊添加時，應添加第二個表格
4. 這個例子是動態的，你可以在apiArray添加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>