AngularJS : How to use ng-repeat with in the templateURL of directive?

Question

I created a directive to display the "dropdown". Following are the code i used

HTML

<km-sselect km-left-title="Left" km-right-title="Right" km-model="sdsd" km-option="['AA','BB']"></km-sselect>

Directive

app.directive('kmSselect', function($parse) {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'select.html',
    scope:true,

    link: function(scope, element, attr) {
      scope.leftTitle='';
            if(angular.isUndefined(attr.kmLeftTitle)) {
              scope.leftTitle='';
            }
            else {
               scope.leftTitle=attr.kmLeftTitle+"  ";
            }
      scope.rightTitle='';
            if(angular.isUndefined(attr.kmRightTitle)) {
              scope.rightTitle='';
            }
            else {
               scope.rightTitle="  "+attr.kmRightTitle ;
            }

      var str1="n in ";
      var str2=attr.kmOption;
      var str3=attr.kmModel;
      scope.model=attr.kmModel;
      scope.repeat=str1.concat(str2);
      scope.result=str1.concat(str3);

    }
  }
})

Select.html

<div>
  <div ng-switch on="format">
    <div ng-switch-when="kmForm">
      <div>
        <div class="floatLeft">
          {{leftTitle}}
          Repeat={{repeat}}
      </div>

      <select multiple ng-model="fdg" ng-click="testfunc(attrs.kmModel)">
        <option ng-repeat={{repeat}} value="{{n}}">{{n}}</option>
      </select>
    </div>{{rightTitle}}</div>
  </div>
  <div ng-switch-when="kmPreview">
    <div>
      <div class="floatLeft">
        title
        result
      </div>
      <div class="floatLeft box">
      <ul>
        <li ng-repeat="result" class="hrline">{{n}}</li>
      </ul>
      </div>
    </div>
  </div>
</div>

I am not getting the values populated in "Dropdown".

Can anyone tell me where i went wrong

SveinT · Accepted Answer · 2014-04-27 21:58:31Z

1

The way you're trying to solve the problem looks complicated, and is probably difficult to implement.

Why not just create an isolate scope? (the directive looks like it's reusable, so you should use isolate scope to prevent unintended consequences).

In that case, you can two-way bind the options and the model, and just pass them on to the ng-model and ng-select inside the template inside the directive.

answered Apr 27, 2014 at 21:58

SveinT

7035 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sten Muchow · Accepted Answer · 2014-04-27 09:46:41Z

0

If you use a select you need to use the directive ng-option for the looping functionality and not ng-repeat. Check the docs here

<select multiple ng-model="fdg" ng-click="testfunc(attrs.kmModel)" ng-options={{repeat}}></select>

However this has a funny smell to it and I dont think it will work as the ng-options will be fired before the {{repeat}} has a chance to be rendered.

I would recommend pulling this select into its own directive so it complies everything all in one go this might solve the potential code smell.

answered Apr 27, 2014 at 9:46

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

Comments

j.wittwer · Accepted Answer · 2014-04-29 17:55:21Z

0

Before release can be converted to n in ['AA','BB'], ng-repeat has already determined that it has an invalid expression.

The solution is to create a scope value for the collection in the link function, then your template can reference it in a standard ng-repeat expression. To do this, use $eval to convert the attribute from a string into an object.

scope.kmOption = scope.$eval(attr.kmOption);

Now you can just write a typical expression in select.html:

<option ng-repeat="n in kmOption" value="{{n}}">{{n}}</option>

And, as others have said, you are typically better off using ng-options with select, but the same fix is necessary:

<select multiple ng-model="$parent.kmModel" ng-options="n for n in kmOption"></select>

Update
You can avoid using the link function to $eval the options if you rewrite your directive like this:

app.directive('kmSselect', function($parse) {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'select.html',
    scope: {
      kmModel: '=',
      format: '=',
      kmLeftTitle: '@',
      kmRightTitle: '@',
      kmOption: '@'
    }
  }
})

And change the template so that kmOption is interpolated:

<select ng-model="$parent.kmModel" ng-options="n for n in {{kmOption}}"></select>

If you want to try the code for yourself, here is a working demo on Plunkr.

Side Note
I am surprised that this works, actually, given that ng-repeat won't allow similar usage (as discussed above): ng-repeat="n in {{kmOption}}".

edited Apr 29, 2014 at 17:55

answered Apr 28, 2014 at 5:53

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

3 Comments

surendher Over a year ago

I saw your plunker, it is good, but when i remove the "multiple" in select.html. The empty item is coming on the list. Can you help me to remove that empty value

j.wittwer Over a year ago

yes, i updated the plunker to get binding working. please take a look

surendher Over a year ago

It is working good, thanks. Is it possible to do the same without using "link" in directive

Collectives™ on Stack Overflow

AngularJS : How to use ng-repeat with in the templateURL of directive?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related