是否可以在AngularJS中动态分配`ng-model`答案

【问题标题】：Is it possible to dynamically assign `ng-model` in AngularJS是否可以在AngularJS中动态分配`ng-model`
【发布时间】：2014-02-25 09:02:07
【问题描述】：

问题描述

我正在尝试使用AngularJS 创建一个简单的Grid。此网格中的每个 cell 都有一个 text-input 。有一个额外的text-input（我称之为全局），其ng-model 应该动态分配给grid-cell 之一，只要用户focus 在那个grid-cell 上。

这不是很清楚吗？让我展示我不成功的实现：

标记

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

Angular 应用程序

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:'me@gmail.com'},
       {name : 'abc def', address:'ghi, jkl', email:'mnop@qrst.uv'}
      ];

});

我想要什么

我想要在单元格获得焦点后在global text-input 和grid-cell 之一之间进行双向数据绑定。这两个inputs 之间的binding 应该一直存在，直到其他grid-cell 之一获得焦点。

这是Plunker

【问题讨论】：

标签： javascript angularjs data-binding angularjs-directive

【解决方案1】：

您可以使用 ng-change, ng-focus 来更改所选项目，而不是使用自定义指令。

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: 'me@gmail.com'
}, {
    name: 'abc def',
    address: 'ghi, jkl',
    email: 'mnop@qrst.uv'
}];

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

});

这里是笨蛋：

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

【讨论】：

gr8，但有一个小错误。如果您从全局文本框中删除了所有字符，则不会从单元格输入中清除最后一个字符。我会尝试解决这个问题，希望你能检查一次。
我明白了。只需将 scope.$watch 的 if 语句更改为 if(text != undefined)。我更新了答案。