添加到可立即在DOM中編輯的列表模型，使用AngularJS

我有一個模型對象的列表，其中ng-repeat指令input元素可以編輯。有一個Add new按鈕可將新項目添加到列表中，從而創建一個新的空白input。但是，只要在視圖中創建新的空輸入，我希望它被聚焦並準備好進行編輯。我不知道該怎麼做，因爲我幾乎無法訪問控制器中的DOM，並且控制器是我將新的空模型添加到列表中的位置。添加到可立即在DOM中編輯的列表模型，使用AngularJS

我對AngularJS仍然很陌生，寫這個應用程序來學習。所以，讓我知道我在實現中錯誤地做了其他事情。

Plunker：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: ''}); 
    }; 

}

你可以從plunker，當Add按鈕看被點擊，一個新的輸入被添加到v但是必須手動將其聚焦。我希望它在點擊Add按鈕時立即獲得焦點（並且出現聚光燈效果）。

謝謝。

來源

2013-05-29 Shrikant Sharat

http://stackoverflow.com/questions/14833326/how-to- set-focus-in-angularjs – mb21

@ mb21，感謝您的鏈接。那麼，我是否應該在我的地球物體上有一個名爲'.isEditing'的僞屬性來監視？那感覺不對。模型爲什麼要關心它被編輯和聚焦？ –

這裏是你的plunker的修改版本：http://plnkr.co/edit/QScU5GE1EeGskbmrZCIc?p=preview –

這裏修改您的plunker的版本：plnkr.co/edit/QScU5GE1EeGskbmrZCIc?p=preview

來源

2013-05-29 17:25:20

試圖做到這一點在多一點 '角' 的方式：http://plnkr.co/edit/8vtgfTqBh3sxqO0KLk4y

來源

2013-05-29 18:29:16 winkerVSbecks

但是，這集中在頁面加載上的最後一個輸入。這不是預期的行爲。而且，在模板中使用'span's和模板中的'input'，而不是直接使用'input'元素有什麼優勢？還是僅僅是約定？ –

我不得不使用span來應用適當的類。 Plunker在ng-class方面表現怪異。理想情況下，您應該使用ng-class來設置或刪除類類型。至於關注init部分，您可以添加一個變量到您的控制器，只有在第一次運行時添加元素後，纔會激活指令的高亮部分。即，將'$ scope.startHighlighting = false;'添加到控制器，然後addNew函數將改變爲：'$ scope.addNew = function（）{$ scope.startHighlighting = true; $ scope.planets.push（{name：''}）; }）;' – winkerVSbecks

啊好吧。非常感謝你。 –

添加到可立即在DOM中編輯的列表模型，使用AngularJS

回答

相關問題