Question

我有两个追加项目，如父和子我想通过点击事件追加这个。创建一个按钮以附加父项，并且当我单击子项时，每个父项需要让子项创建一个按钮创建它应该只创建当前父项中的一个子项。

截至目前，我知道如何通过点击单独附加，但我不知道在点击事件中使用ng-repeat嵌套追加，所以请有人帮助我。

提前致谢。

以下是我的代码。

这在视图文件中

<button class="btn btn-primary" ng-click="newLocation()">Create newLocation</button>
 <div ng-repeat="loc in location">
  <p>hi this is ne location{{$index}}</p>
   <button class="btn btn-primary" ng-click="newSite()">Create new Site</button>
   <div ng-repeat="site in sites">
    <div class="col-md-6">
        <input type="text" class="form-controls"  placeholder="Site Name"/>
    </div>
    <div class="col-md-6">
        <input type="text" class="form-controls"  placeholder="Site Name"/>
    </div>
</div>

在控制器

中

    //Create new Location
    $scope.location = [];
    var tempId = 1;
    $scope.newLocation = function () {
        $scope.location.push({ "id": tempId, "Name": "Name" + tempId });
        tempId++;
    }

   //Create new SIte
    $scope.site = [];
    var siteId = 1;
    $scope.newSite = function () {
        $scope.site.push({ "id": siteId, "Name": "Name" + siteId });
        siteId++;

    }

因为现在孩子也在追加，但它同时出现在父项目中。这是我现在面临的主要问题。

Answer 1

您需要一个父子数据结构，其中_construct是父级，locations是子级。

sites

然后，您可以在其范围内创建{ "locations": [ { "id": 1, "Name": "Name1", "sites": [ { "id": 1, "Name": "Name1" } ] } ] }，并在其父位置范围内创建locations。使用特定位置内的嵌套sites迭代sites。

添加新网站会将父位置作为参数将新网站推送到其中。

ng-repeat

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {

  $scope.data = {
    locations: []
  };
  var tempId = 1;
  $scope.newLocation = function() {
    $scope.data.locations.push({
      "id": tempId,
      "Name": "Name" + tempId,
      "sites": []
    });
    tempId++;
  }

  var siteId = 1;
  $scope.newSite = function(loc) {
    loc.sites.push({
      "id": siteId,
      "Name": "Name" + siteId
    });
    siteId++;
  }
})

Answer 2

试试这个。

＆＃13;

 
 angular.module("test",[]).controller("sample",function($scope)
 {
    $scope.location = [];
    var tempId = 1;
    $scope.newLocation = function () {
        $scope.location.push({ "id": tempId, "Name": "Name" + tempId,"sites":[] });
        tempId++;
    }

   //Create new SIte
    $scope.site = [];
    var siteId = 1;
    $scope.newSite = function (loc) {            
        loc.sites.push({ "id": siteId, "Name": "Name" + siteId })
        siteId++;

    }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="sample">
<button class="btn btn-primary" ng-click="newLocation()">Create newLocation</button>
 <div ng-repeat="loc in location">
  <p>hi this is ne location{{$index}}</p>
   <button class="btn btn-primary" ng-click="newSite(loc)">Create new Site</button>
   <div ng-repeat="site in loc.sites">
    <div class="col-md-6">
        <input type="text" class="form-controls"  placeholder="Site Name" ng-model="site.Name"/>
    </div>
    <div class="col-md-6">
        <input type="text" ng-model="site.id" class="form-controls"  placeholder="Site Name"/>
    </div>
    <br/>
</div>
</div>

＆＃13;

通过单击嵌套ng-repeat

2 个答案: