platanus / angular-keep-values

Keep your input values in your ngModels.

angular-keep-values

Use the value attribute in your inputs to set the value of your ngModel.

angular-keep-values is no longer maintained.

• We will leave the Issues open as a discussion forum only.
• We do not guarantee a response from us in the Issues.
• We are no longer accepting pull requests.

Installation

Just use Bower.

bower install angular-keep-values --save

Then, inject it into your application:

angular.module('MyApp', ['platanus.keepValues']);

Usage

Add the keep-current-value directive to any input, select or textarea element to automatically set its value as the value of its associated ngModel, without the need for ngInit.

Example

<input type="text" ng-model="data.name" value="René Morales" keep-current-value>

<select ng-model="data.city" keep-current-value>
  <option value="1">Santiago</option>
  <option value="2" selected>Concepción</option>
</select>

<input type="radio" ng-model="data.payment" value="Master Card" keep-current-value checked>
<input type="radio" ng-model="data.payment" value="Visa" keep-current-value>
<input type="radio" ng-model="data.payment" value="None" keep-current-value>

<textarea ng-model="data.text" keep-current-value>Lorem ipsum</textarea>

<input type="checkbox" ng-model="data.remember" keep-current-value checked />

Will result in:

$scope.data = {
  name: 'René Morales',
  city: '2',
  payment: 'Master Card',
  text: 'Lorem ipsum',
  remember: true
}

You can also use the keep-input-values directive in any container element to automatically apply keep-current-value to any child input, select or textarea tags with that have an associated ngModel, like so:

<div keep-input-values>
  <input type="text" ng-model="data.name" value="René Morales">
</div>

Results in $scope.data.name == 'René Morales'.

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Credits

Thank you contributors!

angular-keep-values is maintained by platanus.

License

Guides is © 2014 platanus, spa. It is free software and may be redistributed under the terms specified in the LICENSE file.

angular-keep-values's Issues

dont see data-ng-model

https://github.com/platanus/angular-keep-values/blob/master/src/keep-input-values.js#L19

what with data-ng-model ?

give support for <select> tags

$setPristine doesn't work if form name is bound to the controller instead of scope.

Using <form name="vm.ultraForm"> means the following function never runs as it doesn't find vm.ultraForm in scope.

function setPristine(formName){
        if(formName && scope[formName])
          scope[formName].$setPristine();
      }

The element value is not displayed using angular-keep-values

Apparently the keep-current-value directive is added dynamically but the element is not compiled afterwards.

See the case example.

  function link(scope, element, attrs) {
    SUPPORTED_ELEMENTS.forEach(function(tagName){
      var checkElements = element.find(tagName);
      angular.forEach(checkElements, function(checkElement) {
        var checkElement = angular.element(checkElement);
        if ( angular.isDefined(checkElement.attr('ng-model')) ) checkElement.attr('keep-current-value', '');
      })
    });
  }

It can be fixed adding this line:

checkElement.replaceWith($compile(checkElement)(scope));

PR: #4

keep-input-values executes other directives twice

The use of $compile inside keep-input-values makes angular execute other directives twice.

.replaceWith($compile(checkElement)(scope));

Example case: http://jsfiddle.net/g69bx9ao/5/

We can use the preCompile state to add attributes before angular has compiled the form elements.

var directive = {
  compile: compile,
  restrict: 'A'
};

function compile(){
 // add attributes to elements here

  return {
    pre: preCompile
  };
}

PR: #13

Add support to multiple checkbox

When html looks like this

<input type="checkbox" name="roles[]" value="admin" />
<input type="checkbox" name="roles[]" value="guess" />
<input type="checkbox" name="roles[]" value="user" />

Form state changes to dirty without user interaction

Forms should start with a class ng-pristine and a state $pristine set to true in the form controller (https://docs.angularjs.org/api/ng/type/form.FormController#$pristine).

Form with angular-keep-values: http://jsfiddle.net/g69bx9ao/4/
Form without angular-keep-values: http://jsfiddle.net/g69bx9ao/3/.

PR: #9