repeat Select option in ng-repeat Angularjs

Question

I have a form that repeat select option in ng-repeat. in this form i want to selected defualt value for select element. In fact in first select element selected value is "n1" and in second select element selected value is "n2". while in tow select element defualt value is "n2". what is my problem?

function MyCntrl($scope) {
    $scope.data = {
        orders: [{ s:'' }]
    };

    $scope.list = [1,2];
    $scope.data.orders[0] = "n1";
    $scope.data.orders[1] = "n2";
    $scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
        console.log($scope.item.code, $scope.item.name)
    }
}

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyCntrl">
        <div ng-repeat="l in list track by $index">
            <select ng-model="data.orders[$index]" ng-change="update()">
                <option ng-selected ="data.orders[$index] == size.name" ng-repeat="size in sizes">
                    {{size.name}}
                </option>
            </select>
        </div>
        <select ng-model="data.orders[0]" ng-change="update()">
            <option ng-selected ="data.orders[0] == size.name" ng-repeat="size in sizes">
                {{size.name}}
            </option>
        </select>
        <select ng-model="data.orders[1]" ng-change="update()">
            <option ng-selected ="data.orders[1] == size.name" ng-repeat="size in sizes">
                {{size.name}}
            </option>
        </select>
    </div>
</body>
</html>

Panos Bariamis · Accepted Answer · 2015-10-20 06:31:41Z

2

Try this code instead. It uses $parent.$index instead of $index.

ng-repeat tracks by $index by default, so there's no need to specify it.

This causes a problem in your inner loop, which is also tracking by $index. When you say $index in the inner loop it picks up the inner loops index which is always going to evaluate to true.

function MyCntrl($scope) {
    $scope.data = {
        orders:[{ s:'' }]
    };
    $scope.list = [1,2];
    $scope.data.orders[0] = "n1";
    $scope.data.orders[1] = "n2";
    $scope.sizes = [{code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
    $scope.update = function() {
        console.log($scope.item.code, $scope.item.name)
    }
}

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyCntrl">
        <div ng-repeat="l in list track by $index">
            <select ng-model="data.orders[$index]" ng-change="update()">
                <option ng-selected ="data.orders[$parent.$index] == size.name" ng-repeat="size in sizes">
                    {{size.name}}
                </option>
            </select>
        </div>
    </div>
</body>
</html>

edited Oct 20, 2015 at 6:31

Panos Bariamis

4,6697 gold badges41 silver badges63 bronze badges

answered Oct 19, 2015 at 11:47

cjds

8,47611 gold badges57 silver badges86 bronze badges

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

1 Comment

ippi Over a year ago

I would just like to comment on the statement that ng-repeat tracks by $index by default which is wrong. The default is track by $id(obj). The former tracks by order (fragile if you want to move things around in your array). The latter tracks by identity, and gives each item a $$hasKey to keep them apart. Tracking by $index is probably only a good idea if you want to allow duplicate items in your array, or if you are sure you'll never touch the array order.

Collectives™ on Stack Overflow

repeat Select option in ng-repeat Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related