Angularjs directive changing ng-model

Question

I'm making a directive that mimics a <select>, but allows me more styling, but couldn't find any information on how to implement it using ng-model. Here's the directive:

.directive('customSelect', [function() {
        return {
            restrict:'EA',
            require: "ngModel",
            scope:{
                choices:"=",
                selected:"="
            },
            template:'\
                <div class="custom-select">\
                    <div class="label">{{ selected }}</div>\
                    <ul>\
                        <li data-ng-repeat="choice in choices" data-ng-click="ngModel = choice">{{ choice }}</li>\
                    </ul>\
                </div>',
            replace:true
        }
}])

How can I set ng-model from the click event on the <li> ?

Khanh TO · Accepted Answer · 2014-01-26 12:31:02Z

5

Try ngModel.$setViewValue:

app.directive('customSelect', [function() {
        return {
            restrict:'EA',
            require: "?ngModel",
            scope:{
                choices:"=",
                selected:"@"
            },
            link:function(scope,element, attrs,ngModel){
              scope.select = function (choice){
                 ngModel.$setViewValue(choice);
              }
            },
            templateUrl:"template.html",
            replace:true
        }
}])

Template:

<div class="custom-select">
  <div class="label">{{ selected }}</div>
  <ul>
    <li data-ng-repeat="choice in choices" data-ng-click="select(choice)">{{ choice }}</li>
  </ul>
</div>

DEMO (click on an item to see output)

edited Jan 26, 2014 at 12:31

answered Jan 26, 2014 at 12:25

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

2 Comments

StarsSky Over a year ago

the demo is not complete.

Khanh TO Over a year ago

@StarsSky: ah, problem when saving, I'll create the demo again

Collectives™ on Stack Overflow

Angularjs directive changing ng-model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related