Get value from directive in html table

Question

I am using angular js. I want to get value from input inside a row in table.

Below there is an input element. When i click the button (add) i need to get the value for that particular row.

view

   <tr ng-click="" ng-repeat='customer in customers | filter:query | orderBy: sort.field : sort.order'>

       <td ng-repeat='field in fields'>
           {{customer[field]}}
       </td>
       <td mult-ecs>
           <p class="input-group">
                <span class="input-group-addon">Rs</span>
                <input class="form-control" name="debit" type="text" ng-model="customer['id'].value">
           </p>
           <button ng-click="addMulEcs(customer['id'])" class="btn btn-primary btn-sm" >Add</button>
           <button ng-click="removeMulEcs(customer[id])" class="btn btn-danger btn-sm" >Remove</button>
        </td>
    </tr>

controller

.directive('multEcs', ['$http', function($http){
    return{
        restrict: 'A',
        replace:false,
        scope:{
        },
        link: function(scope, elem, attr){
            scope.addMulEcs = function(id){

            }
        }
    }


}]);

image of table enter image description here

Try to add jsfiddle or similar. or atleast put sample customers data. — dotnetstep, Dec 02 '14 at 08:04
you can refer the image for the table. there is an input element in the rows along with add button — Abel Raj, Dec 02 '14 at 08:08
"customer"{ "id": "1", "customername" : "John Doe", "pan" : "4e6ffh" } — Abel Raj, Dec 02 '14 at 08:29

score 0 · Accepted Answer · edited May 23 '17 at 12:20

You can refer to controller scope's variable by binding it to directive scope. In your case I think one way binding just suit your situation.

In your directive setting:

scope:{
          localEcsValue : "@ecsValue"
    },

And in your template :

<td mult-ecs ecs-value="customer['id'].value">

This will bind scope.localEcsValue to customer['id'].value in controller.

And in the link function you can do :

scope.addMulEcs = function(id){
            alert( scope.localEcsValue() )
        }

Be careful with using ng-model inside directive. As directive will create isolated scope and cause the ng-model not bind to the correct variable. check this for more info

Get value from directive in html table

1 Answers1