Question

问题说明

我正在尝试使用Grid创建一个简单的AngularJS。此网格中的每个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 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:'me@gmail.com'},
       {name : 'abc def', address:'ghi, jkl', email:'mnop@qrst.uv'}
      ];

});

我想要什么

我希望在单元格聚焦后global text-input和grid-cell之间的双向数据绑定。这两个binding之间的inputs应该保持不变，直到其中一个grid-cell获得焦点。

这是Plunker

Answer 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

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

1 个答案: