AngularJS动态表单

Question

I have a function for Dynamic form like this

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

My view contains something like this

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

It displays accordingly but my problem is that if I have two data on the database, only one data will be displayed on the form on page load and the second one will be displayed only after I add another from. How can I display the two data simultaneously?

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> 

Just copied and pasted your code and added a module around it and it loads two entries into the view for the ng-repeat as expected.

Verify your data coming back from the server paste it here if you'd like for what gets populated into the link property array.

Answer 2

If i understand your question

1. at first you have a new array from api for example has 2 object
2. 2nd you want to show first form
3. when you click on add, should added the 2nd form
4. this example is dynamic you can add n object in apiArray

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