带存储的角度动态输入字段答案

【问题标题】：Angular dynamic input fields with storage带存储的角度动态输入字段
【发布时间】：2016-12-15 04:49:07
【问题描述】：

我正在尝试创建动态输入字段并使用 NgStorage 将这些类型的值推送到 AngularJS 中的本地存储。

问题是我不确定如何在使用范围和存储的情况下使用 ng-repeat，因此我可以创建新的输入字段。

最后它应该创建/显示两个字段，当输入这些字段时，数据会保存到本地存储中，当单击“添加”时，它会添加两个新字段来输入数据，依此类推。 “删除”按钮应该删除最后两个添加的字段。

Example here

目前 ng-repeat 使用的是ng-repeat="language in storage.languages"，但目前单击“添加”按钮时不显示字段或功能。

我希望我从我的观点说清楚了一切。如果有任何问题，请开火！感谢您的时间和帮助！

【问题讨论】：

我相信 ngStorage 关心将 js 对象转换为键/值对

标签： angularjs

【解决方案1】：

您应该在 ng-model 中使用 language，而不是 $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

【讨论】：

抱歉，究竟是什么不工作？对我来说它看起来不错，它记得我输入的语言。你试过我的 Plunk 吗？您可能需要第一次单击“清除数据”，因为旧对象可能会保留在存储中。
另外，我看到$reset 清除了存储并且没有将其设置为默认值，所以应该将clearData 方法更改为$localStorage.$reset({ languages: []});
您的解决方案似乎有效。非常感谢，非常感谢！ @admax 谢谢，这也是需要的！

【解决方案2】：

删除功能坏了。这应该可以解决它：

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

【讨论】：