Bind select option data from array

Description

The following code shows how to bind select option data from array.

Example


<!DOCTYPE html>
<html  ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
  <script>
var app = angular.module('myApp', []);
<!--from www .j ava2s  .c  om-->
app.controller('MainCtrl', function($scope) {
  $scope.myChoice = 3;
  $scope.options = [
    { name: 'one', value: 1},
    { name: 'two', value: 2},
    { name: 'three', value: 3},
    { name: 'four', value: 4}];
});
  
  </script>
</head>
<body ng-controller="MainCtrl">
  <select ng-model="myChoice">
    <option ng-repeat="option in options" 
            value="{{option.value}}" 
            ng-selected="option.value == myChoice">{{option.name}}</option>
  </select>
  <div>Value = {{myChoice}}</div>
</body>
</html>

Click to view the demo





















Home »
  AngularJS »
    AngularJS Example »




Controller
Directives
Expression
Filter
Form
Inject
Scope
Server
Style
Template
Utilities