0

I need to be able to display inputs based on an array of objects that describe them. For example, this describes 2 inputs foo and bar:

$scope.z.inputs = [{
  name: "foo",
  hint: "Enter foo number.",  // if hint is specified, it should be in a tooltip
  min: "2", // this is optional
  max: "100" // this is optional
}, {
  name: "bar"
}];

See plunkr: http://plnkr.co/edit/giWusNpiRhHibJi3hr2e?p=preview It has a crude directive that works with static inputs. It can't handle the other inputs (foo and bar). Comments above the directive describe the functionality it provides.

What approach can be done to handle these inputs while keeping the extra functionality the directive provides?

What I tried...

Setting min="{{in.min}}" on the input element results in the value in the linking function being the string "{{in.min}}". I tried setting scope and using @ (see the answer at What is the difference between '@' and '=' in directive scope in AngularJS?). However, I didn't understand how to "use attr.$observe..." as is mentioned. And what I did try didnt work. Plus the variable bound to the input with ng-model didn't get updated anymore after setting the directive's scope.

After reading about the ng-switch approach mentioned at Angularjs dynamic directives I tried ng-switch and ng-if. I kept a ng-if for min in the plunkr. If I can avoid having to use ngswitch or ngif for things like min, max, and hint that would be helpful as it would be unwieldy with more attributes.

Update

In the plnkr, I got min and max to work using ng-if statements to handle all possible combinations. I needed to modify the check in the directive for min and max. Instead of checking whether a number is specified, just check whether the attribute is specified. If it is (even if an expresion), then leave it alone and it gets updated with the right value.

I'd still like to be able to avoid the proliferation of ng-ifs if there's a way to do that.

Community
  • 1
  • 1
user3141592
  • 1,069
  • 2
  • 10
  • 20
  • Eight days later and there are still no comments, questions, or attempted answers. I'm left wondering if the question is not understood or if it's really that difficult to solve. – user3141592 Aug 15 '14 at 14:33

1 Answers1

0

I was able to find a solution that avoids a bunch of ng-ifs.

I use min and max whether expressions, numbers, or not defined to build the tooltip more intelligently. And I set min and max accordingly also.

The key parts of the code are here:

var min = element.attr('min');
var max = element.attr('max');

// This tooltip can handle if min and/or max are not set, are set to hard coded numbers, or are expressions.
var tooltip = "{{ ("+max+" === undefined)?'Enter an integer greater than or equal to '+("+min+" || 0)+'.':'Enter an integer within the range '+("+min+" || 0)+' and '+"+max+"+'.'}}";

if ( isNaN(min) ) {
   // If an expression was used and it ends up evaluating to be falsey or if min wasn't defined, this will make the min zero.
  element.attr('min', '{{'+min+' || 0}}');
}
if ( isNaN(max) ) {
  // If an expression was used and it ends up evaluating to be falsey or if max wasn't defined, this will set it.
  element.attr('max', '{{'+max+' || 9223372036854770000}}');
}
element.attr('tooltip', tooltip);

See http://plnkr.co/edit/9JQRKcTpWiqLlujEx3MP?p=preview

user3141592
  • 1,069
  • 2
  • 10
  • 20