Angular Parms Example

Two possible ways of doing parms

by Josh Carroll

HTML

<div data-ng-controller="parmArrayCtrl">
    <h2>{{name}}</h2>
    <div data-ng-repeat="parm in parms">
        <span>{{parm.name}}</span>
        <input type="text" data-ng-model="parm.value" />
        <a href="#" data-ng-click="parm.value = parm.default" data-ng-hide="parm.value == parm.default">revert</a>
    </div>
</div>
<div data-ng-controller="parmPropsCtrl">
    <h2>{{name}}</h2>
    <div>
        <span>{{parm1.name}}</span>
        <input type="text" data-ng-model="parm1.value" />
        <a href="#" data-ng-click="parm1.value = parm1.default" data-ng-hide="parm1.value == parm1.default">revert</a>
    </div>
    <div>
        <span>{{parm2.name}}</span>
        <input type="text" data-ng-model="parm2.value" />
        <a href="#" data-ng-click="parm2.value = parm2.default" data-ng-hide="parm2.value == parm2.default">revert</a>
    </div>
    <div>
        <span>{{parm3.name}}</span>
        <input type="text" data-ng-model="parm3.value" />
        <a href="#" data-ng-click="parm3.value = parm3.default" data-ng-hide="parm3.value == parm3.default">revert</a>
    </div>
</div>

JavaScript

(function(){

    var parmModule = angular.module('parms', []);
    
    parmModule.controller('parmArrayCtrl' ,function($scope){
        $scope.name = "Parms Using Array";
        $scope.parms = [{
            name:"parm1",
            value:"booger",
            default:"booger"
        },                       {
            name:"parm2",
            value:"cleanex",
            default:"tissue"
        },{
            name:"parm3",
            value:"nose",
            default:"nose"
        }];
    });
    
    parmModule.controller('parmPropsCtrl' ,function($scope){
        $scope.name = "Parms Using Properties";
        $scope.parm1 = {
            name:"parm1",
            value:"booger",
            default:"booger"
        };
        $scope.parm2 = {
            name:"parm2",
            value:"cleanex",
            default:"tissue"
        };
        $scope.parm3 = {
            name:"parm3",
            value:"nose",
            default:"nose"
        };
    });
    
}());