是否可以動態分配`在AngularJS NG-model`

問題描述是否可以動態分配`在AngularJS NG-model`

我試圖創建一個使用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>

的角度應用

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]'} 
     ]; 

});

我想要什麼

餘萬t在細胞聚焦後global text-input與grid-cell之一之間的雙向數據綁定。這兩個inputs之間的binding應該一直存在，直到其中一個grid-cell獲得焦點。

這裏是一個Plunker

來源

2014-02-25 Lekhnath

而不是使用自定義指令，您可以用NG-變化，NG-焦點更改所選項目。

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

});

這裏是plunker：

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

來源

2014-02-25 10:52:24 Tamura

GR8，但有一個小錯誤。如果您從全局文本框中刪除了所有字符，則最後一個字符不會從單元格輸入中清除。我會試着去解決這個問題，並希望你能回顧一次。 – Lekhnath

我明白了。只需更改範圍的if語句。$ watch to if（text！= undefined）。我更新了答案。 – Tamura

是否可以動態分配`在AngularJS NG-model`

回答

相關問題