current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I have this Angular form http://plnkr.co/edit/?p=streamer&s=ph0QHW513czywawl. I need to clone the row on clicking ADD (+) and delete selected row on clicking DELETE (-). Looking for a solution in AngularJS only. In current solution, the scopes are not working correctly. Also did not yet figure out how to implement (-) functionality.

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);
    }
}
share|improve this question
1  
Where is the controller code? –  lucuma Jun 12 at 13:23
    
You don't necessarily need a custom directive at all here. You can achieve this with a simple ng-repeat. Have you tried implementing this yourself? I don't see any javascript. –  Charlie Martin Jun 12 at 16:16
    
@lucuma I tried to put some code but after it did not really work, I decided to leave it empty. –  khdilshod Jun 13 at 7:01
    
@CharlieMartin I tried it more after posting. Here it is Plunker. (-) is not working and scopes are broken. –  khdilshod Jun 13 at 7:49
    
@khdilshod, I've posted an answer to your question about removing a row. It looks like you've solved the add. –  lucuma Jun 13 at 15:49
add comment

1 Answer

up vote 0 down vote accepted

Based on your comment and plunker, it looks like you have the Add figured out. The remove row is easier. All you need to do is splice out the row. The issue on your view is you have the index surrounded by {{}} which isn't necessary.

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

Here is an updated plunker: http://plnkr.co/edit/7vW24aDyZH02LO1iO7F3?p=preview&s=ph0QHW513czywawl

share|improve this answer
    
Thanks. It is nice! Now I'm stuck with scopes that I have. If you noticed, I am rendering my scope on the page. Cannot figure out it again, reading angular wiki on github. Any ideas? –  khdilshod Jun 13 at 17:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.