クリックでネストされたng-repeat

親と子のような2つの追加項目があります。これをclickイベントで追加したいと思います。親アイテムを追加するためのボタンが1つ作成され、子アイテムを作成する必要があります。作成するボタンをクリックすると、現在の親アイテム内に子アイテムが1つだけ作成されます。クリックでネストされたng-repeat

現在のところ、クリックでシングル追加する方法はわかっていますが、クリックイベントでng-repeatを使用してネストされた追加を認識していないので、助けてください。

ありがとうございます。

以下は私のコードです。ビューの

これは、今の子供にも追加されているが、それは両方の親項目にappedingだとしてコントローラ

//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++; 

    }

で

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

ファイル。これは今直面している大きな問題です。

出典

2017-06-28 Vivek Kannan

いくつかのコードスニペットか、このために行った作業を追加します。 –

私の質問をコードで更新してください。@AKA –

場所は親オブジェクトで、サイトは子オブジェクトです、あなたは言うべきですか？@ VivekKannan –

locationsが親で、sitesが子である親子データ構造が必要です。

{ 
    "locations": [ 
    { 
     "id": 1, 
     "Name": "Name1", 
     "sites": [ 
     { 
      "id": 1, 
      "Name": "Name1" 
     } 
     ] 
    } 
    ] 
}

次に、あなたは、その親の場所の範囲内で、その範囲内でlocationsとsitesを作成することができます。特定の場所内で入れ子になったng-repeatを使用してsitesを繰り返します。

新しいサイトを追加すると、新しいサイトを追加するための引数として親サイトが使用されます。

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++; 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app" ng-controller="ctrl"> 
 
    <button class="btn btn-primary" ng-click="newLocation()">Create newLocation</button> 
 
    <div ng-repeat="loc in data.locations"> 
 
    <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" ng-model="site.Name" placeholder="Site Name" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <pre>{{data | json}}</pre> 
 
</body>

出典

2017-06-28 10:21:14 Sajal

おっと！私はあなたの答えを見ていない：（ –

ありがとう、それは今働いている:) –

これを試してみてください。


 
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++; 
 

 
    } 
 
    });

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

出典

2017-06-28 10:24:11

あなたの努力のためにもありがとう:) –

クリックでネストされたng-repeat

答えて

関連する問題