AngularJS动态表单

问题描述：

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

它相应地显示，但我的问题是，如果我有两个数据数据库中，只有一个数据将在页面加载时显示在表单上，第二个数据只有在我添加另一个数据后才会显示。我怎样才能同时显示两个数据？

显示您的视图和控制器完全定义理想插入正在运行的脚本。 – shaunhusain

@shaunhusain编辑我的问题，添加我的视图 – bleykFaust

答

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-重复的观点预期。

验证从服务器返回的数据是否粘贴到此处，如果您想要填充到链接属性数组中的内容。

嗯，它显示两个条目进入视图，但我的问题是，例如，它有三个数据库中的数据，第三个条目将只显示如果我添加另一个条目 – bleykFaust

@bleykFaust需要看到一个实际问题的例子......如果它与你如何获取或插入数据到这里没有显示的数据模型有关，那么不知道其他人可以做什么？ – shaunhusain

我通过API从数据库获取数据我有几个数据，但我不能在第一次载入时只显示一个表格 – bleykFaust

答

如果我明白你的问题

首先你有一个新的数组从API例如有2个对象
第二你要显示第一种形式
当你点击添加，应加第二个形式
本例中是动态的，你可以在添加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>

相关推荐