How to change select functions in Angular Directive?

Question

http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview

I have a large select dropdown form which is repeated in 2 places. The only thing that changes is the first select tag, which has a different function.

<!--
  On simple, change ng-change function to functionOne
  On advanced, change ng-change function to functionTwo
-->

<select name="name1" ng-change="functionOne('function1')" id="the-id-1">
<select name="name2" ng-change="functionTwo('function2)" id="the-id-2">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>

I tried using ng-hide ng-show however there must be a different way to accomplish this.

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

.directive('termsForm', function() {
    return {
        templateUrl : "termsForm.html",
        restrict    : "E",
        scope       : false,
        controller  : 'TermsFormController'
    }
})

.directive('selectOptions', function() {
    return {
        templateUrl : "form.html",
        restrict    : "E",
        scope       : false
    }
})

.controller('TermsFormController',
['$scope',
function($scope) {
    var vs = $scope;
    vs.hello = "This is the form.";
    vs.showingSimple = true;
    vs.showingAdvanced = false;

    vs.showForm = function(type) {
      if (type === 'simple') {
        vs.showingSimple = true;
        vs.showingAdvanced = false;
      } else if (type === 'advanced') {
        vs.showingSimple = false;
        vs.showingAdvanced = true;
      }
    }

    vs.functionOne = function(msg) {
      alert(msg);
    }

    vs.functionTwo = function(msg) {
      alert(msg);
    }
}]);

termsForm.html

<ul class="nav nav-tabs">
  <button class="btn btn-info" ng-click="showForm('simple')">Simple</button>
  <button class="btn btn-info" ng-click="showForm('advanced')">Advanced</button>
</ul>

<p>The select:</p>

<div ng-show="showingSimple" class="simple-form">
  <p>Simple</p>
  <select-options></select-options>
</div>

<div ng-show="showingAdvanced" class="advanced-form">
  <p>Advanced</p>
  <select-options></select-options>
</div>

David says Reinstate Monica · Accepted Answer · 2015-03-30 19:53:24Z

3

You already have a directive created for your select, that gets you half way there. Now you just need to pass the function in through whats known as the isolated scope.

.directive('selectOptions', function() {
    return {
        templateUrl : "form.html",
        restrict    : "E",
        scope       : {
          changeFunc: '&'
        }
    }
})

This allows you to pass in the function you want to call on the ng-change event:

<select-options changeFunc="function1"></select-options>
<select-options changeFunc="function2"></select-options>

And then in your form.html you simply put

<select name="name2" ng-change="changeFunc()" id="the-id-2">

This way you are basically passing the funciton in as a parameter. Read this blog for a great guide on isolated scopes.

answered Mar 30, 2015 at 19:53

David says Reinstate Monica

20.2k22 gold badges84 silver badges124 bronze badges

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

2 Comments

Leon Gaban Over a year ago

Thanks! I suppose this can also be used to change out an ng-model?

David says Reinstate Monica Over a year ago

Yes, but you have to use the correct binding type (@). Read that blog for more info.

Andrew Gray · Accepted Answer · 2015-03-30 19:51:44Z

I would just refactor your markup and controller to adapt based on the simple/advanced context.

In your controller, you'd expose a 'generic' on change function for the dropdown, first...

(function () {
    'use strict';

    angular.module('app').controller('someCtrl', [someCtrl]);

    function someCtrl() {
        var vm = this;
        vm.isSimple = true;
        vm.nameChange = function () {
            if(vm.isSimple)
                functionOne('function1');
            else
                functionTwo('function2');
        }

        // Other things go here.
    }
})();

...Then, on your view, your select would change to this*:

<select id="someId" name="someName" ng-change="vm.nameChange()" />

*: Assuming you're using controllerAs syntax, that is. If you're not, don't prepend the vm. on the select.

Collectives™ on Stack Overflow

How to change select functions in Angular Directive?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related