Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>
<link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="starter" ng-controller="controller">
  <div>
  <label class="item item-input item-select">
    <div class="input-label">
      選擇顏色
    </div>
    <select ng-model="myColor" ng-options="item.value as item.name for item in colors">
    </select>
  </label>
  <div style="border:solid 1px black; height:20px"
       ng-style="{'background-color':colors[myColor].name}">
  </div>
  </div>
</body>
</html>
 
var app=angular.module('starter',['ionic']);
app.controller('controller',function($scope){
  $scope.colors = colors;
  $scope.myColor = 0;
});
var colors=[
  {name:'red', value:0},
  {name:'blue', value:1},
  {name:'black', value:2}
];
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
leuowangpro
0viewers