AngularJS - Select v2

by kappa

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div data-ng-controller="MyController">
    <table>
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Fruit
                </th>
                <th>
                    &nbsp;
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="item in items">
                <td>
                    {{item.id}}
                </td>
                <td>
                    <span data-ng-bind="item.fruit.name" data-ng-show="!item.isEditing"></span>
                    <select data-ng-model="item.fruit" data-ng-options="f as f.name 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, name: "Apple"}, {id: 2, name: "Banana"}, {id: 3, name: "Citrus"}];
    
    $scope.items = [
        {
            id: 1,
            fruit: {id: 1, name: "Apple"}
        },
        {
            id: 2,
            fruit: {id: 2, name: "Banana"}
        },
        {
            id: 3,
            fruit: {id: 3, name: "Citrus"}
        }
    ];
    
    $scope.beginEdit = function (item) {
        item.isEditing = true;
    };
    
    $scope.saveEdit = function (item) {
        delete item.isEditing;
    };
}]);

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