CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
vansha
vansha

Reputation: 265

How to update multiple dropdown value on change of another dropdown in AngularJS

I have a table with multiple rows and each row has drop-down to select the value. All the drop-down have same list. At first, All drop-downs have value selected as per JSON. But what I want to do is to have Another drop-down at the top of page and on change of its value, update all the drop-down values in table. I have created a AngularJS directive for dropdown. 

 app.directive('dropdown', function($timeout){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            list: '=dropdown',
            ngModel: '='
        },
        templateUrl: '/dropdownView.html',
        replace: true,
        link: function(scope, elem, attrs, ngModel) {
            scope.height = elem[0].offsetHeight;
            scope.$watch('ngModel',function(){
                scope.selected = ngModel.$modelValue;  
            });
            scope.update = function(rating) {
                ngModel.$setViewValue(rating);
                ngModel.$render(); 
            };
        }
    };
});

<div dropdown="ratings" ng-model="list" ></div>

dropdownView.html

<div class="dropdown" ng-click="open=!open" ng-class="{open:open}">
<div ng-repeat="rating in list" style="top: {{($index + 1) * height}}px; -webkit-transition-delay: {{(list.length - $index) * 0.03}}s; z-index: {{list.length - $index}}" ng-hide="!open" ng-click="update(rating)" ng-class="{selected:selected===rating}">
  <span>{{rating}}</span>
</div>
<span class="title" style="top: 0px; z-index: {{list.length + 1}}">
  <span>{{selected}}</span>
</span>
<span class="clickscreen" ng-hide="!open">&nbsp;</span>

Please help me if someone knows any possible solution.

Here's a plunker created from my code

Upvotes: 0

Views: 2903

Answers (2)

Immanuel Kirubaharan
Immanuel Kirubaharan

Reputation: 1094

Can you add the below watch into your controller into in your plunkr code and try to execute,

   $scope.$watch('myrating', function(){
      angular.forEach(vm.data, function(item){
        item.rating=$scope.myrating;
      });
    });

Upvotes: 0

tanmay
tanmay

Reputation: 7911

There are multiple ways you could solve this:

  • First, having another $watch in your directive which changes selected according to myrating on the parent.

    scope.$watch('$parent.myrating', function(newVal, oldVal) {
  if(newVal) {
    scope.selected = newVal;
  }
});

    Here's working example of this.

  • Second, you can use events. Broadcast an event from parent where the myrating dropdown is. And, listen the same in child directive(s).

    For this to work, you need ng-change firing from the dropdown so,

    <div dropdown="ratings" ng-change="main.myratingChanged(myrating)" ...></div>

    now, in controller, broadcast the event with new myrating:

    vm.myratingChanged = function(myrating) {
  $scope.$broadcast("myratingchanged", myrating)
}

    lastly, in the directive, listen to it and updated scope.selected:

    scope.$on('myratingchanged', function(event, data) {
  scope.selected = data
})

    Here's working example of event approach.

Using events is always cleaner approach than having to $watch and that too from parent. Choose wisely! :)

Upvotes: 1

Related Questions