存儲角動態輸入字段

我想創建動態輸入字段並使用NgStorage將這些類型值推送到AngularJS中的localstorage。存儲角動態輸入字段

問題是我不確定如何在範圍和存儲使用情況下使用ng-repeat，所以我可以創建新的輸入字段。

最後，它應該創建/顯示兩個字段，當輸入到這些字段中時，數據被保存到本地存儲中，當點擊「添加」時，它會添加兩個輸入數據的新字段，依此類推。「刪除」按鈕應刪除最後兩個添加的字段。

Example here

目前對於NG-有重複使用ng-repeat="language in storage.languages"，但此刻點擊「添加」按鈕，當它不顯示的字段或功能。

我希望我從我的觀點來看一切都很清楚。如果有任何問題，請開火！感謝您的時間和幫助！

來源

2015-12-27 user1612619

我相信ngStorage關心轉化JS對象 – admax

您應該使用language，在NG-模型不是$ storage.languages爲輸入：

<form> 
    <div class="language" ng-repeat="language in $storage.languages"> 
     <fieldset> 
      <label for="language">Language</label> 
      <input type="text" id="language" ng-model="language.name"> 
     </fieldset> 
     <fieldset> 
      <label for="skill">Skill</label> 
      <input type="text" id="skill" ng-model="language.skill"> 
     </fieldset> 
    </div> 
    <button ng-click="clearAll()">Clear data</button> 
    <button ng-click="removeLanguage($index)">Delete</button> 
    <button ng-click="addLanguage()">Add</button> 
</form>

此外，languages字段應該初始設置爲空數組[]使push({})工作。

請參閱http://plnkr.co/edit/pHPZhgJMbEqX0mfWFnMQ?p=preview

來源

2015-12-27 19:24:28 admax

對不起鍵/值對，究竟是不是工作？對我來說它看起來很好，它記得我輸入的語言。你嘗試過我的普拉克嗎？您可能需要首次單擊「清除數據」，因爲舊對象可能會保留在存儲中。 – admax

另外，我看到'$ reset'清除了存儲並且沒有將其設置爲默認值，所以'clearData'方法應該改爲'$ localStorage。$ reset（{languages：[]}）;' – admax

您的解決方案似乎工作。非常感謝你，非常appreaciated！ @admax謝謝，這也是需要的！ – user1612619

刪除功能已損壞。這應該可以解決它：

$scope.removeLanguage = function() { 
    $scope.$storage.languages.splice(this.index, 1); 
}

來源

2016-12-14 20:49:07

存儲角動態輸入字段

回答

相關問題