AngularJS disabling one dropdown in ng-repeat

Question

I have the following ng-repeat in my HTML code:

<div ng-repeat="a in items">
  <div>
    <span>{{a.name}}</span>
  </div>
  <div>
    <select ng-model="a.c_id" ng-options="d.c_id as d.description for d in loclist" ng-disabled="display" ng-change="selected(a.c_id)">
    </select>
  </div>

Then in my controller I have:

$scope.display = false;
$scope.selected = function (value) {
    $scope.te = value;
    if ($scope.te == 3) {
        $scope.display = true;
    }        
};

Problem I am facing is that when I change the selection in the drop down it is supposed to disable or enable the dropdown based on value. However when I change the selection in one of the drop down that has value of 3 all the dropdowns change to disabled state rather than that particular one.

Please let me know how to fix this code so when after ng-repeat has displayed all rows and I change the dropdown value of one of the rows it just disables that particular one rather than disabling all the dropdowns in all rows.

Khanh TO · Accepted Answer · 2014-05-18 09:22:41Z

1

Angular ng-repeat creates child scopes inherited from parent scope. In your case, all your ng-repeat's scopes inherit the display property from parent scope. Therefore when this property changes, it reflects on all scopes.

Try this instead of $scope to access the current scope of ng-repeat:

$scope.selected = function (value) {
     this.te = value;
     if (this.te == 3) {
         this.display = true;
     }        
};

answered May 18, 2014 at 9:22

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS disabling one dropdown in ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related