Angular: Static/Dynamic product options
HTML
<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<h3>List of products</h3>
<ul>
<li ng:repeat="product in products" ng:click="edit(product)" class="productRow">
{{product.name}}
</li>
</ul>
<hr />
<div ng:show="product" ng:controller="Editor">
<h3>Editor</h3>
Selected product: {{product.name}}
<div ng:repeat="o in product.options">
{{o.name}}
<ng:switch on="o.isStatic">
<select ng:switch-when="true"
ng:options="l.value as l.value for l in map[o.name]"
ng:model="o.value">
</select>
<input ng:switch-when="false"
ng:model="o.value"/>
</ng:switch>
</div>
<hr />
</div>
<h3>Debug</h3>
<pre>{{products}}</pre>
CSS
h3 {
font-size: 1.4em;
font-weight: bold;
margin-top: 15px;
}
.productRow {
cursor:pointer;
padding:2px 0px 2px 0px;
}
.productRow:hover {
background-color:#ddd;
}
JavaScript
var app = angular.module('MyApp', []);
app.value('MyStaticOptions',[
{name:'size', values:[{value:'large'},{value:'small'}]},
{name:'color', values:[{value:'red'},{value:'blue'}]}
]);
app.value('MyProductList',[
{name:'product1', options:[
{name:'size',value:'large',isStatic:true},
{name:'color',value:'blue',isStatic:true},
{name:'custom',value:'some text',isStatic:false}
]},
{name:'product2', options:[
{name:'size',value:'large',isStatic:true},
{name:'color',value:'red',isStatic:true}
]},
{name:'product3', options:[
{name:'size',value:'small',isStatic:true},
{name:'color',value:'red',isStatic:true},
{name:'custom',value:'some text',isStatic:false}
]}
]);
function Main(MyProductList) {
var scope = this;
scope.products = MyProductList;
scope.edit = function(product) {
scope.product = product;
};
}
function Editor(MyStaticOptions) {
var map = this.map = {};
angular.forEach(MyStaticOptions, function(option) {
map[option.name] = option.values;
});
}