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：指令不叫

回答

相关问题