使用 ng-repeat 的动态表单

Question

美好的一天！我正在使用动态表单来显示我的数据。如果特定模型有两个值，我想在页面加载时显示两个表单。我的问题是，即使我的模型有两个值，显示的表单也只有一个，如果我点击添加按钮，附加表单包含我的模型的第二个值。

<div class="text-left">
    <h3>Title<button class="btn btn-primary pull-right" type="button" ng-click="remove(Item)" value=""><span class="fa fa-minus"></span></button>&nbsp;<button class="btn btn-primary pull-right" type="button" ng-click="add()" value=""/><span class="fa fa-plus"></span></button></h3>
</div>
<br/><legend></legend>
<div id="web" ng-repeat="Item in FormData.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="Category" name="Category" ng-model="LinkNew[$index].category" required/>
                    <option value="0">Web</option>
                    <option value="1">Local</option>
                    <option value="2">International De</option>

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

我的控制器看起来像这样

$scope.FormData = {};
            $scope.FormData.link = [
                    {  category: null }
            ];
            $scope.add = function() {
                    $scope.FormData.link.push({  category: null });
            };

            $scope.remove = function(Item) {
                //console.log(subscriber);
                $scope.FormData.link.pop(Item);
            };

Answer 1

ng-repeat 指令需要集合中的项目不同。 添加一些东西以使它们与众不同：

var linkId = 0;

$scope.FormData = {};

$scope.FormData.link = [
    { id: linkId++, 
      category: null }
];

$scope.add = function() {
    $scope.FormData.link.push({ id: linkId++,
                                category: null });
};

$scope.remove = function(Item) {
    //console.log(subscriber);
    $scope.FormData.link.pop(Item);
};

每次添加新项目时，linkId 变量都会递增。

要使ng-repeat 指令更高效，请按唯一ID 进行跟踪：

<div id="web" ng-repeat="Item in FormData.link track by Item.id">

为了尽量减少 DOM 元素的创建，ngRepeat 使用一个函数来“跟踪”集合中的所有项目及其对应的 DOM 元素。例如，如果将一个项目添加到集合中，ngRepeat 将知道所有其他项目已经具有 DOM 元素，并且不会重新渲染它们。

默认的跟踪功能不允许数组中有重复项。这是因为当存在重复项时，无法保持集合项和 DOM 元素之间的一对一映射。

欲了解更多信息，请参阅AngularJS ng-repeat Directive API Reference - Tracking and Duplicates