AngularJS의 요소 행 복제

Question

이 각도 형식은 http://plnkr.co/edit/?p=streamer&s=ph0QHW513czywawl입니다. ADD (+)를 클릭하면 행을 복제하고 DELETE (-)를 클릭하면 선택된 행을 삭제해야합니다. AngularJS에서만 해결책을 찾고 있습니다. 현재 솔루션에서 범위가 올바르게 작동하지 않습니다. 또한 (-) 기능을 구현하는 방법을 아직 파악하지 못했습니다. 귀하의 의견 온을 기반으로

index.html을

<div ng-controller="MyCtrl" style="padding: 10px;"> 
<br/> 
<div style="width: 90%; display: inline-block; border: 1px silver solid;"> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <select class="form-control" data-ng-model="hr.langauge.level" tooltip="Level"> 
     <option value="Native" ng-selected="true">Native</option> 
     </select> 
    </div> 
    <div class="col-xs-4"> 
     <select class="form-control" data-ng-model="hr.langauge.name" tooltip="Language"> 
     <option value="">Language</option> 
     <option value="EN">English</option> 
     <option value="IT">Italian</option> 
     <option value="DE">German</option> 
     <option value="FR">French</option> 
     </select> 
    </div> 
    <div class="col-xs-3"> 
     <input type="text" data-ng-model="hr.langauge.remark" class="form-control" placeholder="Remark" tooltip="Remark"> 
    </div> 
    <div class="col-xs-2"> 

    </div> 
    </div> 
    <div select-last ng-repeat='item in items'></div> 
</div> 
<a class="btn" style="margin-bottom: 27px;" href="#" tooltip="Add" ng-click='addRow()'> 
    <i class="glyphicon glyphicon-plus"></i> 
</a> 

{{hr.langauge | json}}

language.html

<div class="row" style="padding-top: 5px;"> 
    <div class="col-xs-3"> 
     <select class="form-control" data-ng-model="hr.langauge.level" tooltip="Level"> 
      <option value="">Level</option> 
      <option value="proficient">Proficient</option> 
      <option value="intermediate">Intermediate</option> 
      <option value="beginner">Beginner</option> 
     </select> 
    </div> 
    <div class="col-xs-4"> 
     <select class="form-control" data-ng-model="hr.langauge.name" tooltip="Language"> 
      <option value="">Language</option> 
      <option value="EN">English</option> 
      <option value="IT">Italian</option> 
      <option value="DE">German</option> 
      <option value="FR">French</option> 
     </select> 
    </div> 
    <div class="col-xs-3"> 
     <input type="text" data-ng-model="hr.langauge.remark" class="form-control" placeholder="Remark" tooltip="Remarks"> 
    </div> 
    <div class="col-xs-2"> 
     <a class="btn" href="#" tooltip="Delete" ng-click="deleteRow({{$index}});"> 
      <i class="glyphicon glyphicon-minus"></i> 
     </a>{{$index}} 
    </div> 
</div> 

script.js

var myApp = angular.module('myApp',[]); 
myApp.directive('selectLast', function() { 
    return { 
     restrict: 'A', 
     templateUrl: 'language.html' 
    } 
}); 

function MyCtrl($scope) { 
    $scope.items = []; 
    $scope.newitem = ''; 

    $scope.addRow = function(){ 
     $scope.items.push($scope.newitem); 
     console.log('+ clicked'); 
    } 

    $scope.deleteRow = function(rowNo) { 
     /*$scope.items.splice($scope.newitem);*/ 
     console.log('- clicked in row ' + rowNo); 
    } 
} 

Answer 1

d plunker, 당신은 Add을 알아 냈습니다. 행 제거가 더 쉽습니다. 행을 이어 붙이기 만하면됩니다. 보기에 문제가 필요하지 않습니다 {{}}에 의해 둘러싸인 인덱스가 있습니다. 여기

$scope.deleteRow = function(rowNo) { 
    /*$scope.items.splice($scope.newitem);*/ 
    $scope.languages.splice(rowNo, 1); 
    console.log('- clicked in row ' + rowNo); 
}; 

    <a class="btn" href="#" tooltip="Delete" ng-click="deleteRow($index);"> 
     <i class="glyphicon glyphicon-minus"></i> 
    </a>{{$index}} 

업데이트 된 plunker입니다 : http://plnkr.co/edit/7vW24aDyZH02LO1iO7F3?p=preview&s=ph0QHW513czywawl

Answer 2

기능은 업데이트, 클릭 편집을 행 항목이 행 데이터의 임시 복사본을 만드는 것입니다. 링크

https://thinkster.io/egghead/angular-copy/