0

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 ?

||||||
  • can you try scope.option = JSON.parse(scope.option), right now its a string and not its actual value – harishr Jan 14 '16 at 2:52
1

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.

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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