Question

我正在使用angularjs.I我正在做ng-repeat来显示通知类型列表，我在li tag中显示。在这个列表中有三个值是默认的。我在列表旁边有一个Add按钮。如果我点击添加按钮然后我需要显示另一个列表，其中包含三个默认值。再次添加按钮将位置移动到下一个。如果我再次单击添加按钮，则会显示另一个包含默认值的列表并添加按钮移位位置，此过程将继续。

这是我使用默认值和其他值显示的第一个列表

    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-
    if="workboardstages.length">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in workboardstages">
    {{workboard.stageName}} 
    </li>
    </ul>
    </div>

这是我放在列表旁边的添加按钮

    <div class="col-xs-12 col-sm-4 col-md-4">
    <button data-ng-click="addNew()">Add New Workboard</button>
    </div>

以下是我在点击添加按钮后尝试显示另一个列表的方法，但我不知道该怎么做。

    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-show="flag">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in workboardStagesWithDefault">
    {{workboard.Name}} 
    </li>
    </ul>
    </div>

这是Controller.js

    $scope.workboardStagesWithDefault = [
    {
        Name:"New"
    },
    {
        Name:"Won"
    },
    {
        Name:"Lost"
    }
    ];
    $scope.flag=false;

     $scope.addNew = function(){
           $scope.flag=true;
        };

    $scope.getAllWorkboardStages = function(){
    AccountSettingService.getAllWorkboardStages().then(function(response){
        $scope.workboardstages = response.data;
    });
    }

在点击添加按钮后，我显示另一个列表，其中包含默认值＆＃34;新＆＃34;，＆＃34;赢了＆＃34;和＆＃34;迷失＆＃34;但是，如果我点击另一个时间添加值，它不再添加列表。我想在我点击添加按钮时添加列表。但现在它只添加一次。任何人都可以告诉如何在点击添加时继续添加div列表？< / p>

Answer 1

每次要添加列表时，请将其添加到包含列表$scope.listOfLists = [];的列表中。然后，您可以将NgRepeat与listOfLists一起使用，并向视图中动态添加更多列表。

以下是一个例子：

＆＃13;

angular.module("app",[]).controller("myCtrl",function($scope){
  $scope.listOfLists = [];
  $scope.workboardstages = [
    {
        stageName:"stageName1"
    },
    {
        stageName:"stageName2"
    },
    {
        stageName:"stageName3"
    }
  ];
  $scope.workboardStagesWithDefault = [
    {
        Name:"New"
    },
    {
        Name:"Won"
    },
    {
        Name:"Lost"
    }
    ];
    
     $scope.addNew = function(){
           var clonedList = angular.copy($scope.workboardStagesWithDefault);
           $scope.listOfLists.push(clonedList);
     };
     $scope.removeMe = function(index){
        $scope.listOfLists.splice(index,1);
     };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">

<div class="col-xs-12 col-sm-4 col-md-4" data-ng-
    if="workboardstages.length">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in workboardstages">
    {{workboard.stageName}} 
    </li>
    </ul>
    </div>
    
    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-show="listOfLists.length > 0">
    <div data-ng-repeat="list in listOfLists">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in list">
    {{workboard.Name}} 
    </li>
    </ul>
    <button ng-click="removeMe($index)">remove {{$index}}</button>
    </div>
    
    </div>
    
    <div class="col-xs-12 col-sm-4 col-md-4">
    <button data-ng-click="addNew()">Add New Workboard</button>
    </div>

</div>

＆＃13;

Answer 2

如果要在单击后添加新元素，则应扩展要迭代的列表。例如，如果您通过以下方式更改代码，则在代码中： $scope.addNew = function(){ $scope.flag=true; $scope.workboardStagesWithDefault.push({Name:"ButtonNew"}); }; 每当您单击“添加新工作板”按钮时，您将添加新位置ButtonNew。

在ng-repeat angularjs中动态添加div元素

2 个答案: