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

根据你的评论和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/

克隆AngularJS中的元素行

2 个答案: