Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-change on select option calling multiple unique functions

Tags:

angularjs

My problem is that for each select option I need to call a different function, not the same function.

I started with ng-click on each select option but quickly realized this doesn't work. I then read Angular's documentation on ng-options https://docs.angularjs.org/api/ng/directive/ngOptions

The documentation illustrates using ng-change but it is based on the fact that each select option gets the same function applied to it.

After thinking about this for a bit I ended up creating a function that gets called on ng-change. This function just determines which delegate to call.

$scope.determineAction = function() {
    var getDelegation = $injector.get($scope.selected.action);
    getDelegation.delegate();
  }

Plunker: http://plnkr.co/edit/2Str6OqmFDH3kKdiW6i5

I've created a solution to my problem but I want to know if this is the right approach? Am I missing something in ng-options that allows for many different function calls?

like image 586
Harbinger Avatar asked Apr 14 '15 13:04

Harbinger


People also ask

How do you call multiple functions in NG-change?

You just need to add another function in the same double quotes.

Can I use ngModel for select?

The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values). It also handles dynamic <option> elements, which can be added using the ngRepeat or ngOptions directives.

What is ngchange?

Ng-change is a directive in AngularJS which is meant for performing operations when a component value or event is changed. In other words, ng-change directive tells AngularJS what to do when the value of an HTML element changes. An ng-model directive is required by the ng-change directive.

How does ng on changes work?

The ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.


1 Answers

TL;DR: Yes, you are doing the right thing.

Yes, you are doing the right thing. You're not missing some secret aspect of ng-options that allows you to specify something different for each item. In fact, doing this would defeat the purpose of ng-options. It's meant specifically for situations where the number of items you're dealing with are variable, but the actions that need to be executed on them are the same.

In your Plunker, you're demonstrating this exactly. You have a list of actions that is variable; it could have any number of actions to do. However, what you want to do with them is the same: when you select a new item, you want to run some action as specified by your backing scope. This is exactly what the controller is meant to do! As you found, all you need to do is write your function in such a way that it determines the current state of things and reacts accordingly. And all your view needs to do is make sure that it is setting up that state so that your controller can make sense of it.

You're doing all of this already so keep it up!

like image 129
SethGunnells Avatar answered Oct 16 '22 07:10

SethGunnells