AngularJS Input Modified Example

AngularJS module to detect and indicate input modifications.

by Slava Fomin II

HTML

<div ng-app="application">
  <div ng-controller="ApplicationController">
      <form name="myForm" novalidate>
          
        <pre>
            
            Gender pristine:         "{{ myForm.gender.$pristine }}"
            Gender pristine (group): "{{ myForm.gender.group.pristine }}"
        </pre>
          
        <div class="form-group">
            <label class="control-label">Gender:</label>
            <div class="control">
                <div class="radio-inline">
                    <label>
                        <input
                            type="radio"
                            name="gender"
                            ng-model="user.gender"
                            value="male"
                        >
                        Male
                    </label>
                </div>
                <div class="radio-inline">
                    <label>
                        <input
                            type="radio"
                            name="gender"
                            ng-model="user.gender"
                            value="female"
                        >
                        Female
                    </label>
                </div>
                <div class="radio-inline">
                    <label>
                        <input
                            type="radio"
                            name="gender"
                            ng-model="user.gender"
                            value="unknown"
                        >
                        It's hard to say
                    </label>
                </div>
            </div>
        </div>
                    
        <div class="form-group footer">
            <p>Calls <strong>myForm.gender.group.setPristine()</strong></p>
            <div class="control buttons">
                <button
                    type="submit"
                    class="btn btn-primary"
                    ng-click="myForm.gender.group.setPristine()"
    ...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/betsol/angular-input-group/b60266d33b983154f3e9d8fc6ac1b701555533b5/src/angular-input-group.js"></script>

<style>

div.footer {
    margin-top: 10px;
}

div.footer button {
    padding: 5px 20px;
}

.form-group {
    margin: 10px;
    padding: 10px;
    border: 1px dashed #AAA;
}

.form-group label {
    color: 000;
    font-size: 13px;
    font-weight: bold;
}

div.radio-inline {
    display: inline-block;
    margin-left: 10px;
}
div.radio-inline:first-child {
    margin-left: 0;
}
div.radio-inline label {
    font-weight: normal;
}

JavaScript

angular.module('application', ['ngInputGroup'])
    .controller('ApplicationController', function($scope) {
        $scope.user = {
            gender: 'unknown'
        };
    })
;