Angularjs Form Update

by zargyle

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app="update" ng-controller="homeCtrl">
    <label>Unit Price
        <input type="text" ng-model="price.unit_price" \>
    </label><br>
    <label>Unit
        <select ng-model="price.unit" ng-options="unit.id as unit.value for unit in units"></select>
    </label><br>
    <label>Zone
        <select ng-model="price.zone" ng-options="zone.id as zone.name for zone in zones"></select>
    </label><br>
    {{changes()}}
    </div>
</div>

JavaScript

var app = angular.module('update', []);

app.controller('homeCtrl', function ($scope) {

    $scope.price = {
        unit: 2,
        unit_price: "34.99",
        zone: 1
    };

    $scope.price_ = angular.copy($scope.price);

    $scope.units = [{
        id: 0,
        value: "Sqft"
    }, {
        id: 1,
        value: "Sqyd"
    }, {
        id: 2,
        value: "Box"
    }];

    $scope.zones = [{
        id: 0,
        name: "San Diego"
    }, {
        id: 1,
        name: "Seattle"
    }];

    $scope.changes = function () {
        if (($scope.price.unit !== $scope.price_.unit) || ($scope.price.unit_price !== $scope.price_.unit_price) || ($scope.price.zone !== $scope.price_.zone)) {
            return "Changed";
        } else {
            return "---------";
        }

    };


});