Is it possible to dynamically assign `ng-model` in AngularJS

Question

Problem Description

I am trying to create a simple Grid using AngularJS. Each cell in this grid has one text-input . There is one extra text-input(I call it global) whose ng-model should be dynamincally assigned to one of the grid-cell, whenever the user focus on that grid-cell.

Isn't that clear ?? Let me show my unsuccessful implementation :

The Markup

<body ng-controller="MainCtrl">

   <b> Global : </b>
   <input type="text", ng-model="global" size=50 />
   <br />

   <b> Grid : </b>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td> <input type="text" ng-model="item.name" grid-input="global" /></td>
                <td> <input type="text" ng-model="item.address" grid-input="global" /></td>
                <td> <input type="text" ng-model="item.email" grid-input="global" /></td>
            </tr>
        </tbody>
    </table>
  </body>

The Angular App

var app = angular.module('app', []);

app.directive('gridInput', function($rootScope){
   return {
       restrict : 'AE'
       , scope : {
           model : '=ngModel'
          ,  global : '=gridInput'
       }
       , link : function(scope, iElem, iAttrs) {

           $(iElem).on('focus', function(e){
             scope.global = scope.model;//what is this doing?? I don't KNOW!
           })
       }
   } 
});

app.controller('MainCtrl', function($scope) {

  $scope.items = [
      {name : 'Lekhnath Rijal', address:'Ilam, Nepal', email:'[email protected]'},
       {name : 'abc def', address:'ghi, jkl', email:'[email protected]'}
      ];

});

What do I want

I want two-way data binding between the global text-input and one of the grid-cell after the cell gets focused. The binding between these two inputs should persist until one of other grid-cell receives focus.

Here is a Plunker

Tamura · Accepted Answer · 2014-02-25 12:38:26Z

1

Instead of using custom-directive, you can use ng-change, ng-focus to change the selected item.

index.html

<body ng-controller="MainCtrl">

   <b> Global : </b>
   <input type="text", ng-model="global.text" size=50 />
   <br />

   <b> Grid : </b>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td> 
                  <input 
                    type="text" 
                    ng-model="item.name" 
                    ng-focus="global.text=item.name; setSelectedItem(item, 'name')" 
                    ng-change="global.text=item.name"/>
                </td>
                <td> 
                  <input 
                    type="text" 
                    ng-model="item.address" 
                    ng-focus="global.text=item.address; setSelectedItem(item, 'address')" 
                    ng-change="global.text=item.address"/>
                </td>
                <td>
                  <input 
                    type="text" 
                    ng-model="item.email" 
                    ng-focus="global.text=item.email; setSelectedItem(item, 'email')" ng-change="global.text=item.email"/>
                </td>
            </tr>
        </tbody>
    </table>
  </body>

app.js

app.controller('MainCtrl', function($scope) {

$scope.global = {};
$scope.items = [{
    name: 'Lekhnath Rijal',
    address: 'Ilam, Nepal',
    email: '[email protected]'
}, {
    name: 'abc def',
    address: 'ghi, jkl',
    email: '[email protected]'
}];

    $scope.$watch('global.text', function(text) {
    if (text != undefined && $scope.selectedItem) {
        $scope.selectedItem[$scope.selectedAttribute] = text;
    }
}); $scope.setSelectedItem = function(item, attribute) {
    $scope.selectedItem = item;
    $scope.selectedAttribute = attribute;
}

});

Here is the plunker:

http://plnkr.co/edit/r7rIiT?p=preview

edited Feb 25, 2014 at 12:38

answered Feb 25, 2014 at 10:52

Tamura

1,7981 gold badge14 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lekhnath Over a year ago

gr8, but there is a little bug. If you removed all the chars from global text box, the last char will not be cleared from the cell input. I will give a try to fix that, and hope you'll review it once.

Tamura Over a year ago

i got it. just change the if statement of scope.$watch to if(text != undefined). I updated the answer.

Collectives™ on Stack Overflow

Is it possible to dynamically assign `ng-model` in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related