Dropdown in a directive with ng-options by parameters

[edouard...@gmail.com]

Hi,

I would like to create a directive with a dropdown template. I try to give the value for ng-options as a parameter of the directive but the dropdown only contains the default value.
I don't understand with my dropdown is empty if I use the directive.

Here is a Fiddle and my code in this post : http://jsfiddle.net/wXV6Z/6/

var app = angular.module('app', []);

function Ctrl($scope){    
    $scope.countries = [
        algeria={name:'ALGERIA', phoneCode:'213'},
        andorra={name:'ANDORRA', phoneCode:'376'},
        angola={name:'ANGOLA', phoneCode:'244'}
    ];
}

app.directive('skiTest', function() {
    return {
      'replace': true,
      'restrict': 'E',
      'scope': {
        'data': '=',
      }, 
      link: function (scope, element, attrs) {
            scope.options = attrs.selectOptions;
       },
        'template':'<div><select name="testSelect" ng-model="ngModel" ng-options="
      {{options}} in data"><option value="">Code</option></select></div>'
        }
      });

<div ng-controller="Ctrl">
    <div>
        <h2>Without directive</h2>
        <select ng-model="code" ng-options="country.phoneCode as country.name for    country in countries">
            <option value="">Code</option>
        </select>
    </div>
    <div>
        <h2>With directives</h2>
        <ski-test data="countries" select-options="country.phoneCode as country.name for country"></ski-test>
    </div> 

</div>

Thank you very much ! 

[Neil Larson]

I do not entirely understand why you had such a different ng-options definition in the directive template compared to the one outside of the directive (in your test case) but either way in your directive template you are passing in a complex object and not telling angular what part of that data to use for what. If you put "options.name for options in data" that resolves the problem (http://jsfiddle.net/wXV6Z/8/) or "options.phoneCode for options in data (http://jsfiddle.net/wXV6Z/9/) or as in your original "options.phoneCode as options.name for options in data" (http://jsfiddle.net/wXV6Z/10/)

[Edouard Kaiser]

Hi,

Thank you for the answer but that's exactly what I don't wanna do. The content of ng-options has to be a param.

I want to build an advanced dropdown (in term of interface), I simplified the UI here, but I need to create a more complicated template. So I need to have a generic template because all my dropdowns are not gonna contain the same kind of data, so I can't use a predefine ng-options content, it has to be a parameter.

2013/5/2 Neil Larson <ntla...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/oFx0rTTp3eA/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Neil Larson]

I will be interested to see if anyone else has a solution for you but my gut feeling is you cant get there from here. If I understand correctly you are trying to create a black box that can handle any possible input regardless of structure and that simply isnt possible. You have to tell angular how to build the structure. My feeling is you can partially accomplish what you are asking for in one of three ways, either A) use more parameters to pass in the val and display options and build your select that way, B) use transclusion to build the select as you did in your example and have the directive transclude that into the structure you are building (redundant if you are creating a directive for only the purpose of building dropdowns, that is what ng-options is for), or C) pass in a config object in which you define the val and display names that will match up to the data. But all of these require an innate knowledge of the data structure so you can define what elements go where.

If you are trying to build a directive that can simply take in any scope variable referencing an object of any various structure and have it handle it without any way to decipher the structure of that object, its not going to be an option. You have to tell the framework what data/values to put where. In the case of your example it simply doesnt know which of the two provided values in the options object you want to be the name and which you want to be the value.

If I have misunderstood something I will try to help you arrive at a better solution, or if any of the three above options are closer I can work up a fiddle to show what I had in mind.

[Edouard Kaiser]

That's exactly what I wanna do, you understood perfectly. Thank you for your help !

[Sander Elias]

Hi, Edouard,

Have a look at my go at this fiddle.

This will do what you want. It works, although I have to add a warning. If your template is big, or needs a lot off processing, a fair part of it will be done twice. The code I wrote can be adapted to be a lot smarter in this account. There are still many ways you can improve on this. For example, you might want to keep your initial template empty, and just compute it in the final go.

With kind regards

Sander Elias

[Edouard Kaiser]

Very impressive, thank you very much, I see now in which direction I have to go. Thank you again.

2013/5/3 Sander Elias <sande...@gmail.com>

--