CODEWITHSUNDEEP
javascriptangularjs
f0ster
f0ster

Reputation: 558

Dynamic model binding in nested directives working for input values, but not select

I have a custom directive being used like so: 

  <drop-down-filter-field
    model="my_model.property"
    options="{ list: property_options, field: 'code' }"
    ></drop-down-filter-field>

With the directive code (field is another directive that groups together some common markup for errors and layout etc):

   <field label="label" field="field" model="model" display="display" annotation="annotation">
    <select         
        ng-model="$parent.model"
        ng-change="setValue(item.value, item[options.field])"
    >
        <option ng-repeat="item in options.list" value="{{item.value}}">{{item[options.field]}}</option>
    </select>
</field>

I tried to add the ng-change to manually set my model value, since the drop down isn't working. But, the function in ng-chang isn't firing either.

And Directive

angular.module('my-app')

.directive('dropDownFilterField', function($compile) {
    return {
      restrict: 'E',
      templateUrl: 'views/directives/form-elements/drop-down-filter-field.html',
      controller: 'dropDownFilterField',
      scope: {
        model: '=',
        label: '=',
        field: '=',
        options: '=',
        annotation: '=',
      }
    };
})
.controller('dropDownFilterField', function($scope, $element, $parse) {

    $scope.setValue = function(value) {     
      self.$scope.model = value;
    };

})
;

I already have this pattern with the nested directive with "$parent.model", functioning in several other templates/directives, for example, an input tag:

<field label="label" field="field" model="model" annotation="annotation" validate="validate">
  <input type="text" name="{{formname}}" ng-model="$parent.model" ng-required="{{required}}" placeholder="{{field.default}}"
    uib-typeahead="{{'typeAheadItem' + (options.field ? '.' + options.field : '')}} as {{'typeAheadItem' + (options.field ? '.' + options.field : '')}} for typeAheadItem in options.list | filter:$viewValue | limitTo:{{options.limit || 8}}"
    ui-validate="'validateFunction($value)'"/>
</field>

All of my other custom directives that contain inputs, and textareas are working, but I can't get it working for select. Anyone know why this might be ?

Upvotes: 0

Views: 115

Answers (1)

Icycool
Icycool

Reputation: 7179

Have you tried using ng-options?

<select         
    ng-model="$parent.model"
    ng-options="item.value as item[options.field] for item in options.list"
>
</select>

There should be no need to use ng-change to update ng-model value, the two-way-binding of ng-model should update itself.

Upvotes: 1

Related Questions