我在我的视图中使用以下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中存储与模型相关的视图数据的好方法是什么?
答案 0 :(得分:2)
我认为您可以使用某种内容提供商。并将其发送到您的后端。
你可以这样做:
(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()”来调用工厂函数并设置一个值
答案 1 :(得分:0)
您的后端服务应该能够清除您不想要的信息,但很难提供一个很好的解决方案,只有这么少的细节。你能举例说明你的html,你的控制器和你的服务/工厂吗?