Utilizing ng-model and ng-repeat in a custom directive

Question

Utilizing ng-model and ng-repeat in a custom directive

Having trouble with a directive I'm building. I want to define options within the directive, but set a default option in my controller. The rendering looks good, but the default option isn't being selected. Any suggestions? Check out the Plunkr

    angular.module('app', [])
  .controller('Ctrl', function ($scope) {
    $scope.defaultSearchRange = 3;  
  })
  .directive('dateRange', function () {
    return {
      restrict: 'A',
      scope: {
        searchRange: '='
      },
      replace: true,
      template: '<div><select ng-model="searchRange"><option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option></select></div>',
      controller: function ($scope) {
        $scope.options = [
            { name: '',             value: 0 },
            { name: 'Today',        value: 1 },
            { name: 'Yesterday',    value: 2 },
            { name: 'Last 7 Days',  value: 3 },
            { name: 'Last 30 Days', value: 4 },
            { name: 'Month to Date',value: 5 },
            { name: 'Year to Date', value: 6 }
        ]
      }
    }
  })

javascript angularjs angularjs-directive

Answer 1

Answer №1

To set the default value, consider using ng-options instead of ng-repeat. The track by variation allows you to select a value in the same "object format". Check out this working plunker here.

Here's how you can modify the code:

angular.module('app', [])
  .controller('Ctrl', function ($scope) {
    $scope.defaultSearchRange = 3;
  })
  .directive('dateRange', function () {
    return {
      restrict: 'A',
      scope: {
        searchRange: '='
      },
      replace: true,
      template: '<div><select ng-model="selected" ng-options="o.name for o in options track by o.value"></select></div>',
      link: function (scope) {

        scope.selected = { value: scope.searchRange };

        scope.$watch('selected', function(selected) {

          scope.searchRange = selected.value;
        });

        scope.options = [
            { name: '',             value: 0 },
            { name: 'Today',        value: 1 },
            { name: 'Yesterday',    value: 2 },
            { name: 'Last 7 Days',  value: 3 },
            { name: 'Last 30 Days', value: 4 },
            { name: 'Month to Date',value: 5 },
            { name: 'Year to Date', value: 6 }
        ];
      }
    }
  })

Please note that the above code introduces a new directive scope property selected. If the controller passes an object instead of just the number value, this step would not be necessary. Since the value is mapped, we must $watch and then map the selected value back out.

Answer 2

To set the default value, consider using ng-options instead of ng-repeat. The track by variation allows you to select a value in the same "object format". Check out this working plunker here.

Here's how you can modify the code:

angular.module('app', [])
  .controller('Ctrl', function ($scope) {
    $scope.defaultSearchRange = 3;
  })
  .directive('dateRange', function () {
    return {
      restrict: 'A',
      scope: {
        searchRange: '='
      },
      replace: true,
      template: '<div><select ng-model="selected" ng-options="o.name for o in options track by o.value"></select></div>',
      link: function (scope) {

        scope.selected = { value: scope.searchRange };

        scope.$watch('selected', function(selected) {

          scope.searchRange = selected.value;
        });

        scope.options = [
            { name: '',             value: 0 },
            { name: 'Today',        value: 1 },
            { name: 'Yesterday',    value: 2 },
            { name: 'Last 7 Days',  value: 3 },
            { name: 'Last 30 Days', value: 4 },
            { name: 'Month to Date',value: 5 },
            { name: 'Year to Date', value: 6 }
        ];
      }
    }
  })

Please note that the above code introduces a new directive scope property selected. If the controller passes an object instead of just the number value, this step would not be necessary. Since the value is mapped, we must $watch and then map the selected value back out.

Utilizing ng-model and ng-repeat in a custom directive

Answer №1

Similar questions

Steps to fix ESlint warning: Avoid using assignment in return Statement (no-return-assign)

React, handling various router navigations

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

form for submitting multiple data via Ajax

Updating ng-model does not trigger a refresh in AngularJS $scope

In Angular-Cli, the variables @Input and @Output are consistently null until they are assigned

Can you explain the correct folder configuration for a SpringBoot project that incorporates static files?

Tips on including a trash can symbol to rows in a bootstrap table using React

There was a problem with the WebSocket handshake: the response header value for 'Sec-WebSocket-Protocol' did not match any of the values sent

What could be the reason for the view/Vue.js dev tools not updating with the new data after pushing an item into a data array?

Issue with AngularJs Grid: Code does not function properly when placed within an event listener

Enable AngularJS to automatically redirect to the login page when a user is not authenticated,

Is there a way to integrate the distanceTo function from Leaflet into my own custom library that I am planning to develop?

Change the height of textarea dynamically using jQuery

Improved Ecommerce Tracking with Google Tag Manager for an Angular JS Website

Troubleshooting: Unable to delete data using $http in AngularJS

What are the steps for implementing responsive design animation in my particular scenario?

Plunker is having trouble locating the angularfire simpleLogin feature

What is the best way to display or conceal buttons when the textarea is in focus or out of focus, while still allowing them

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match