編集可能な要素のng-repeatディレクティブを使用してビューに表示されるモデル オブジェクトのリストがあります。リストに新しい項目を追加するボタンinputがあり、新しい空の が作成されます。しかし、新しい空の入力がビューに作成されるとすぐに、それをフォーカスして編集できるようにしたいと考えています。コントローラーのDOMにほとんどアクセスできず、コントローラーは新しい空のモデルをリストに追加する場所であるため、これについてどうすればよいかわかりません。Add newinput
私はまだ AngularJS を使ったばかりで、学ぶためにこのアプリを書いています。そのため、実装で間違ったことを他に教えてください。
プランカー: http://plnkr.co/Ig4OtuUtFatIknO1Kfxi
興味深いコード:
HTML:
<body ng-controller=PlanetCtrl>
<div>
<input ng-repeat='it in planets' type=text ng-model=it.name edit-spotlight>
</div>
<button ng-click=addNew() class='btn btn-primary'>+ Add new item</button>
<div id=spotlight-shadow></div>
</body>
Javascript:
angular.module('planet-man', []).
// ... editSpotlight directive ...
function PlanetCtrl ($scope) {
$scope.planets = [
{name: 'Mercury'},
{name: 'Venus'},
{name: 'Earth'},
{name: 'Mars'}
];
$scope.addNew = function () {
$scope.planets.push({name: ''});
};
}
プランカーからわかるように、Addボタンをクリックすると新しい入力がビューに追加されますが、手動でフォーカスする必要があります。ボタンをクリックするとすぐにフォーカスを受け取る (そしてスポットライト効果を表示する) ようにしAddます。
ありがとうございました。