AngularJS - Select

by kappa

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div data-ng-controller="MyController">
    <table>
        <tbody>
            <tr data-ng-repeat="item in items">
                <td>
                    {{item.id}}
                </td>
                <td>
                    <span data-ng-bind="item.chosenFruit" data-ng-show="!item.isEditing"></span>
                    <select data-ng-model="item.chosenFruit" data-ng-options="f.id as f.localizedName for f in fruits" data-ng-show="item.isEditing"></select>
                </td>
                <td>
                    <input data-ng-click="beginEdit(item)" data-ng-show="!item.isEditing" type="button" value="Edit" />
                    <input data-ng-click="saveEdit(item)" data-ng-show="item.isEditing" type="button" value="Save" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

"use strict";

var module = angular.module("MyModule", []);

module.controller("MyController", ["$scope", function ($scope) {
    $scope.fruits = [{id: 1, localizedName: "Apple"}, {id: 2, localizedName: "Banana"}, {id: 3, localizedName: "Citrus"}];
    $scope.items = [{id: 1, chosenFruit: "Apple"}, {id: 2, chosenFruit: "Banana"}, {id: 3, chosenFruit: "Citrus"}];
    
    $scope.beginEdit = function (item) {
        item.isEditing = true;
    };
    
    $scope.saveEdit = function (item) {
        delete item.isEditing;
    };
}]);

angular.bootstrap(document, ["MyModule"]);