| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Example - example-example50-debug</title> |
| |
| |
| <script src="../../../angular.js"></script> |
| |
| |
| |
| </head> |
| <body ng-app=""> |
| <script> |
| function MyCntrl($scope) { |
| $scope.colors = [ |
| {name:'black', shade:'dark'}, |
| {name:'white', shade:'light'}, |
| {name:'red', shade:'dark'}, |
| {name:'blue', shade:'dark'}, |
| {name:'yellow', shade:'light'} |
| ]; |
| $scope.color = $scope.colors[2]; // red |
| } |
| </script> |
| <div ng-controller="MyCntrl"> |
| <ul> |
| <li ng-repeat="color in colors"> |
| Name: <input ng-model="color.name"> |
| [<a href ng-click="colors.splice($index, 1)">X</a>] |
| </li> |
| <li> |
| [<a href ng-click="colors.push({})">add</a>] |
| </li> |
| </ul> |
| <hr/> |
| Color (null not allowed): |
| <select ng-model="color" ng-options="c.name for c in colors"></select><br> |
| |
| Color (null allowed): |
| <span class="nullable"> |
| <select ng-model="color" ng-options="c.name for c in colors"> |
| <option value="">-- choose color --</option> |
| </select> |
| </span><br/> |
| |
| Color grouped by shade: |
| <select ng-model="color" ng-options="c.name group by c.shade for c in colors"> |
| </select><br/> |
| |
| |
| Select <a href ng-click="color={name:'not in list'}">bogus</a>.<br> |
| <hr/> |
| Currently selected: {{ {selected_color:color} }} |
| <div style="border:solid 1px black; height:20px" |
| ng-style="{'background-color':color.name}"> |
| </div> |
| </div> |
| </body> |
| </html> |
