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-重複的觀點預期。

驗證從服務器返回的數據是否粘貼到此處，如果您想要填充到鏈接屬性數組中的內容。

Answer 2

如果我明白你的問題

1. 首先你有一個新的數組從API例如有2個對象
2. 第二你要顯示第一種形式
3. 當你點擊添加，應加第二個形式
4. 本例中是動態的，你可以在添加n對象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>