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

具有ng-repeat

1 个答案: