<code style=
"box-sizing:border-box;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"
><span style=
"box-sizing:border-box;color:navy;"
><script></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
angular</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>.</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>module</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>(</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'selectExample'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>[])</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>.</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>controller</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>(</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'ExampleController'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>[</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'$scope'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>Function</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>(</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
$scope
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>)</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>{</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
$scope
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>.</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>colors </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>[</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>{</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>name</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'black'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> shade</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'dark'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>},</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>{</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>name</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'white'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> shade</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'light'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>},</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>{</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>name</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'red'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> shade</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'dark'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>},</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>{</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>name</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'blue'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> shade</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'dark'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>},</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>{</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>name</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'yellow'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>,</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> shade</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>:</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
'light'
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>}</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>];</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
$scope
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>.</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>myColor </span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
$scope
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>.</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>colors</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>[</span><span style=
"box-sizing:border-box;color:rgb(68, 85, 136);"
>2</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>];</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:rgb(153, 153, 136);"
>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>}]);
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
></span><span style=
"box-sizing:border-box;color:navy;"
></script>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
></span><span style=
"box-sizing:border-box;color:navy;"
><div</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-controller</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"ExampleController"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><ul></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><li</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-repeat</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"color in colors"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
Name: </span><span style=
"box-sizing:border-box;color:navy;"
><input</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-model</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"color.name"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
[</span><span style=
"box-sizing:border-box;color:navy;"
><a</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>href</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-click</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"colors.splice($index, 1)"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>X</span><span style=
"box-sizing:border-box;color:navy;"
></a></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>]
</span><span style=
"box-sizing:border-box;color:navy;"
></li></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><li></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
[</span><span style=
"box-sizing:border-box;color:navy;"
><a</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>href</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-click</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"colors.push({})"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>add</span><span style=
"box-sizing:border-box;color:navy;"
></a></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>]
</span><span style=
"box-sizing:border-box;color:navy;"
></li></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
></ul></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><hr/></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
Color (null not allowed):
</span><span style=
"box-sizing:border-box;color:navy;"
><select</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-model</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"myColor"
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-options</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"color.name for color in colors"
</span><span style=
"box-sizing:border-box;color:navy;"
>></select><br></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
Color (null allowed):
</span><span style=
"box-sizing:border-box;color:navy;"
><span</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>
class
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"nullable"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><select</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-model</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"myColor"
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-options</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"color.name for color in colors"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><option</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>value</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
""
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>-- choose color --</span><span style=
"box-sizing:border-box;color:navy;"
></option></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
></select></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
></span><br/></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
Color grouped by shade:
</span><span style=
"box-sizing:border-box;color:navy;"
><select</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-model</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"myColor"
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-options</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"color.name group by color.shade for color in colors"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
></select><br/></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
Select </span><span style=
"box-sizing:border-box;color:navy;"
><a</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>href</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>ng-click</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"myColor = { name:'not in list', shade: 'other' }"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>bogus</span><span style=
"box-sizing:border-box;color:navy;"
></a></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>.</span><span style=
"box-sizing:border-box;color:navy;"
><br></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
><hr/></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
Currently selected: {{ {selected_color:myColor} }}
</span><span style=
"box-sizing:border-box;color:navy;"
><div</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
> </span><span style=
"box-sizing:border-box;color:teal;"
>style</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
">border</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
">:</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
">solid </span><span style="
box-sizing:border-box;color:rgb(68, 85, 136);
">1px</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
"> black</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
">;</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
"> </span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
">height</span><span style="
box-sizing:border-box;color:rgb(51, 51, 51);
">:</span><span style="
box-sizing:border-box;color:rgb(68, 85, 136);
">20px</span><span style="
box-sizing:border-box;color:rgb(221, 17, 68);
">"
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:teal;"
>ng-style</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>=</span><span style=
"box-sizing:border-box;color:rgb(221, 17, 68);"
>
"{'background-color':myColor.name}"
</span><span style=
"box-sizing:border-box;color:navy;"
>></span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
>
</span><span style=
"box-sizing:border-box;color:navy;"
></div>
</span><span style=
"box-sizing:border-box;color:rgb(51, 51, 51);"
></span><span style=
"box-sizing:border-box;color:navy;"
></div></span></code>