current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am fairly new to AngularJS, and I have the following problem.

I have an HTML Element:

    <div class="hn-multi-select" array-of-strings="testArray">
    </div>

and a Directive: 

angular.module('directivesinuse')
  .directive('arrayOfStrings', function($rootScope) {
    return {
      scope: {
            pahn: '=arrayOfStrings'
        },

      template: '<div><input type="text">'+
          '<select name="" id="" multiple ng-model="pahn" ng-options="dm.name for dm in pahn"></select></div>'
      replace: true,
      compile: function compile(tElement, tAttrs, transclude) {
          return {
            pre: function preLink(scope, iElem, iAttrs) {
            },
            post: function postLink(scope, iElem, iAttrs) {
          }
        };
      }

    };

});

What I want to achieve is, that you enter an array (with objects who have the attribute name) into the HTML Component array-of-strings="dModelTest" . This array gets passed on to the directive, who creates a Select List with all the components out of that array.

Everything works fine, but I cant get it to fetch the array from the array-of-strings and create the proper template out of that information.

In the webpage it still shows up as:

<select name="" id="" multiple="" ng-model="pahn" ng-options="dm.name for dm in pahn" class="ng-pristine ng-valid"></select>

But it should show up as

<select name="" id="" multiple="" ng-model="dModelTest" ng-options="dm.name for dm in dModelTest" class="ng-pristine ng-valid"></select>

Do you guys have any suggestions for that problem?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

In your code you have forgotten to declare the display value of each item with the 

ng-options="dm as dm.name for dm in pahn"

Moreover, in your case you dont need to override the compile function, define the template is enough.

here is a working example. Hope it will help you.

http://jsfiddle.net/n7TKE/4/

    .controller('ParentController', function($scope) {
        $scope.array = [{name: 'hi'}, {name: 'ho'}, {name: 'hu'}];
    })
    .directive('toSelectList', function () {
        return {
            scope: {
                pahn: '=toSelectList'
            },
            restrict: 'A',
            replace: true,         
            template: '<div><input type="text" ng-model="selectedValue.name">'+
'<select ng-model="selectedValue" ng-options="dm as dm.name for dm in pahn"></select></div>'

        }

the directive gets the array of items and create a select list with them.

The item name is bind to the input text

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.