Adding "hiddenExpression" to make it easier to interface with the hide feature

Author: Kent C. Dodds

CHANGELOG.md

@@ -4,7 +4,7 @@ Version numbers correspond to `bower.json` version
 
 ## Features
 
-Added `hide` property on fields. Allows devs to conditionally show fields.
+Added `hide` property on fields. Allows devs to conditionally show fields. Also adding `hideExpression` property which is an expression that will be evaluated on the result object (using $parse) to make the api simpler to use.
 
 ## Bug Fixes
 

README.md

@@ -57,7 +57,7 @@ Example data as it would be set in the controller
 			label: 'Password',
 			required: true,
 			disabled: false, //default: false
-			hide: true, // see watch below
+			hideExpression: '!username' // hide when username is blank
 		}
 
 	];
@@ -79,10 +79,6 @@ Example data as it would be set in the controller
 	$scope.onSubmit = function() {
 		console.log('form submitted:', $scope.formData);
 	};
-
-	$scope.$watch('!formData.username', function(isBlank) {
-		$scope.formFields[1].hide = !isBlank;
-	});
 ```
 ### Creating Forms
 Forms can be customized with the options below.
@@ -144,9 +140,16 @@ When constructing fields use the options below to customize each field object. Y
 ###### Default
 >`undefined`
 
+---
+##### hideExpression (expression string)
+>`hideExpression` is used to conditionally show the input. Evaluates on the `result` and uses the `hide` property on the field.
+
+###### Default
+>`undefined`
+
 ---
 ##### hide (boolean)
->`hide` when true, the input is hidden (meant to be used with a watch). In the example above, the password field would be hidden until username has a value.
+>`hide` is used to conditionally show the input. When true, the input is hidden (meant to be used with a watch).
 
 ###### Default
 >`undefined`

src/directives/formly-form.js

@@ -1,6 +1,6 @@
 'use strict';
 angular.module('formly.render')
-.directive('formlyForm', function formlyForm() {
+.directive('formlyForm', function formlyForm($parse) {
 	return {
 		restrict: 'AE',
 		templateUrl: 'directives/formly-form.html',
@@ -17,6 +17,16 @@ angular.module('formly.render')
 					//Post gets called after angular has created the FormController
 					//Now pass the FormController back up to the parent scope
 					scope.formOnParentScope = scope[attr.name];
+					angular.forEach(scope.fields, function(field) {
+						if (field.hideExpression) {
+						var getter = $parse(field.hideExpression);
+						scope.$watch(function() {
+							return getter(scope.result);
+						}, function(hide) {
+							field.hide = hide;
+						});
+						}
+					});
 				}
 			}
 		}