Angularjs：指令不叫

我有一個輸入：Angularjs：指令不叫

<table> 
... 
<td style="width:59px"><input ng-model="myModel.propertyOne" ng-blur="persistValue(myModel)" enter-as-tab></td> 
<td style="width:59px"><input ng-model="myModel.propertyTwo" ng-blur="persistValue(myModel)" enter-as-tab></td>

其指令

angular.module('bioandbioApp').directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       event.preventDefault(); 
       var elementToFocus = element.next('td').find('input')[1]; 
       if(angular.isDefined(elementToFocus)) 
        elementToFocus.focus(); 
      } 
     }); 
    }; 
});

該指令被稱爲當用戶按下Enter鍵，將焦點設置到下一個標籤的輸入。

我的問題是調用該指令，但未調用elementToFocus.focus（），因此未設置焦點。

我不明白爲什麼。有人知道嗎？

http://jsfiddle.net/tomy29/vpaqt29d/105/

感謝

來源

2015-09-07 user1260928

小心創建一個小提琴或蹦牀？ –

好吧，jsfidlle完成 – user1260928

您可以使用此代碼

$(this).closest('td').next('td').find('input')[0];

當前，this是當前td的輸入字段。所以，通過這個，你可以找到當前td的下一個輸入。

這裏是工作JSFIDDLE

來源

2015-09-07 08:17:09 Thinker

在年齡輸入框中，您的解決方案未將焦點放在下一個輸入元素上。我認爲正確的解決方案是將焦點放在表格中的下一個輸入元素上。 –

雖然你的小提琴是使用靜態內容和一組固定的領域，下面是我如何實現的解決方案，但是，這取決於動態內容和您的需求，解決方案可能變化：

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       event.preventDefault(); 
       var elementToFocus; 

       if(attrs["name"] == "personAge"){     
        elementToFocus = element.parent().parent().next().find('input')[0]; 
       }else{ 
        elementToFocus = element.parent().next().find('input')[0]; 
       } 

       if(angular.isDefined(elementToFocus)) 
        elementToFocus.focus(); 
      } 
     }); 
    }; 
});

來源

2015-09-07 08:08:03

它進入下一個輸入，但在下一個，不是在相同的 – user1260928

根據你的小提琴更新答案。 –

你需要先找到父母，然後去下一個元素。

試試下面的代碼：

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

app.controller("con", function ($scope) { 

    $scope.persons = [{ 
     name: 'Susan', 
     age: 1 
    }, { 
     name: 'Peter', 
     age: 1 
    }, { 
     name: 'Jack', 
     age: 2 
    }]; 
}); 

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if (event.which === 13) { 
       event.preventDefault(); 
       console.log("parent"); 
       console.log(element.parent()) 
       var elementToFocus = element.parent().next('td').find('input')[0]; 
       console.log("next element"); 
       console.log(elementToFocus); 
       if (angular.isDefined(elementToFocus)) elementToFocus.focus(); 
      } 
     }); 
    }; 
});

JSFiddle

- 編輯 -
這絕對可以優化，但這樣做的CRUD方法是如下：

<body ng-app="ap" ng-controller="con"> 
    <h4>Pressing <i>Enter/Return</i> in the <i>Age</i> field will iterate through the ages</h4> 

    <table> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
     </tr> 
     <tr ng-repeat='person in persons'> 
      <td> 
       <input type='text' name="personName" ng-model="person.name" enter-as-tab /> 
      </td> 
      <td> 
       <input type='number' name="personAge" ng-model="person.age" enter-as-tab/> 
      </td> 
     </tr> 
    </table> 
</body> 

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

app.controller("con", function ($scope) { 

    $scope.persons = [{ 
     name: 'Susan', 
     age: 1 
    }, { 
     name: 'Peter', 
     age: 1 
    }, { 
     name: 'Jack', 
     age: 2 
    }]; 
}); 

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if (event.which === 13) { 
       event.preventDefault(); 
       console.log("parent"); 
       console.log(element.parent()) 
       var elementToFocus = element.parent().next('td').find('input')[0]; 
       console.log('next element'); 
       console.log(elementToFocus); 
       if (angular.isDefined(elementToFocus)) { 
        elementToFocus.focus(); 
       } else { 
        element.parent().parent().next('tr').find('input')[0].focus(); 
       } 
      } 
     }); 
    }; 
});

JSFiddle

來源

2015-09-07 08:21:47 Aakash

您的解決方案在年齡輸入框中未將焦點放在下一個輸入元素上。我認爲正確的解決方案將焦點放在表中的下一個輸入元素上。 –

Angularjs：指令不叫

回答

相關問題