My Technical Notes

Thursday, 20 August 2015

ng-options example


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <select ng-model="selectedItem" ng-options="x.id as x.name for x in items"></select><br />
        Selected value is: {{selectedItem}}
    </div>

    <script>
        var app = angular.module('app', []);

        app.controller('ctrl', function ($scope) {
            $scope.items = [
                { id: 1, name: 'John' },
                { id: 2, name: 'Fred' },
                { id: 3, name: 'David' }
            ]

            $scope.selectedItem = 1;
        });
    </script>
</body>
</html>

No comments: