Question

我在我的视图中使用以下isText属性在下拉列表和文本输入字段之间切换（ng-click="family.isText = !family.isText"和ng-show的组合），同时遍历所有字体系列。

font = {
    name: null,
    style: null,
    families: [{
        name: null,
        parent: null,
        isText: true // <--
    }]
};

这是我正在使用的模板：

<p  ng-repeat="family in file.font.families"
    ng-init="family.textInput = false">

        <!-- Default families input is selection -->
        <select ng-model="file.font.families[$index].name"
                ng-hide="family.textInput"
                ng-change="updateMainFamily($parent.$index, $index)">

            <option disabled value="">— Famille</option>
            <option ng-repeat="family in familiesList"
                    ng-value="family">

                {{ _.capitalize(family) }}
            </option>

        </select>

        <select ng-model="file.font.families[$index].parent"
                ng-hide="family.textInput">

            <option disabled value="">— Grande famille</option>
            <option ng-repeat="mainFamily in mainFamiliesList"
                    ng-value="mainFamily"
                    ng-selected="file.font.families[$parent.$index].parent == mainFamily">

                {{ _.capitalize(mainFamily) }}
            </option>

        </select>

        <!-- But can be switched to text input (ex: for adding a new family)  -->
        <input  type="text"
                class="family"
                ng-model="file.font.families[$index].name"
                ng-show="family.textInput">

        <input  type="text"
                class="family"
                ng-model="file.font.families[$index].parent"
                ng-show="family.textInput">

        <!-- ... with these buttons -->
        <button class="alt small"
                ng-click="family.textInput = !family.textInput"
                ng-hide="family.textInput">

            <i class="fa fa-terminal"></i>
        </button>
        <button class="alt small"
                ng-click="family.textInput = !family.textInput"
                ng-show="family.textInput">

            <i class="fa fa-list"></i>
        </button>
</p>

当用户保存模型时，我不想将这种数据发送到我的后端，因为它只在视图上下文中有意义。另一方面，我发现创建一个类似familiesState的属性来存储它们并不方便。

在AngularJS中存储与模型相关的视图数据的好方法是什么？

Answer 1

我认为您可以使用某种内容提供商。并将其发送到您的后端。

你可以这样做：

(function() {
'use strict';
angular.module('some.module')
    .factory('myFontContentProvider', [contentProvider]);

function contentProvider() {
   var content = this;
   var name = null;
   var style = null;
   var families: [{
       name: null,
       parent: null
   }]

   content.setName = function(n) {
        name = n;
   }
   content.getName = function() {
        return name;
   }

   /* continue with your getters and setters here */

   return content;
}

然后在你的控制器中，你和你的工厂一起做这样的mappind：

(function() {
'use strict';
angular.module('some.module')
    .controller('yourController', ['myFontContentProvider',yourCtrl]);

function yourCtrl(contentProvider) {
   var vm = this;
   /* mapping here */
   vm.getName = contentProvider.getName;
   vm.setName = contentProvider.setName;
   /* etc */
}

最后在你的DOM中你有这个：

<div ng-controller="yourController as ctrl"
<!-- to get your value -->
<span ng-bind="ctrl.getName()"></span>
<!-- etc -->

用一些ng-click =“ctrl.setYOURPROPERTY（）”来调用工厂函数并设置一个值

Answer 2

您的后端服务应该能够清除您不想要的信息，但很难提供一个很好的解决方案，只有这么少的细节。你能举例说明你的html，你的控制器和你的服务/工厂吗？

我应该在哪里将模型相关的视图数据存储在AngularJS中？

2 个答案: