CODEWITHSUNDEEP
angularjsangularjs-components
Hemal Patel
Hemal Patel

Reputation: 7

How to load values in ng-option of a component in AngularJS

I have created a component in AngularJS to load the values in a dropdownlist. However, I am not able to pass any values to the component and, in turn, to be loaded in the list through ng-option.

The controller

(function() {
  "use strict";
  angular.module("dropdownCtrl", [])
  .component("dropdownControl", {
    template: `
        <select ng-model="varName.name"
                ng-option="val.value for val in varValues">
        </select>
    `,
    controller: dropdownCtrl,
    bindings: {
      varName: "=",
      varValues: "="
    }
  });

  dropdownCtrl.$inject = ["$scope","$routeParams","$location","qlikService","settingsService","kpirenderService"];

  function dropdownCtrl($scope,$routeParams,$location,qlikService,settingsService,kpirenderService) {

  }
})();

The component being used in HTML - dropdown-control

<div class="w-100 viz chart-object p-10"
     ng-repeat="chart in dashboard.settings.charts|limitTo:2">   
    <div class="grid box-card">
        <div class="qvobject-wrapper">
            <div class="object-actions"
                 ng-repeat="var in chart.variables.slice(1)|limitTo:1">
                <dropdown-control var-name="var.name" var-values="var">
                </dropdown-control>
            </div>
            <div id="{{chart.objId}}" class="qvobject"></div>
        </div>
    </div>
</div>

Json where the values reside

"charts": [{
    "objId": "mbYRef",
    "title": "% Forecast Attainment",
    "variables": [{
            "name": "vForecast_Type",
            "value": ["Budget", "Latest"]
        },
        {
            "name": "vMetric",
            "value": ["Net Sales", "TRx"]
        }
    ]
}]

Upvotes: 0

Views: 55

Answers (1)

georgeawg
georgeawg

Reputation: 48968

One of the techniques for debugging is to insert interpolation ({{ }}) to check values:

app.component("dropdownControl", {
    template: `
        varName={{$ctrl.varName}}<br>
        varValues={{$ctrl.varValues}}<br>
        <select ng-model="varName.name"
                ng-option="val.value for val in varValues">
        </select>
    `,
    controller: dropdownCtrl,
    bindings: {
      varName: "=",
      varValues: "="
    }
});

Use this technique to check if the variables have expected values. One problem I see is that the expressions in the HTML are not referencing the $ctrl object.

Upvotes: 0

Related Questions