ng-select setze ausgewählte Option mit ng-repeat

Question

Ich kann nicht die Auswahlbox zeigen, dass eine Option ausgewählt ist, obwohl es so aussieht, wie es sein sollte. Ich habe eine Reihe von Objekten und ich habe eine Eigenschaft für jede Darstellung als wahr oder falsch.

<div ng-controller="testCtrl"> 
<table class="table table-striped table-bordered table-hover"> 
    <tr ng-repeat="(key, data) in activePlans.details"> 
    <td>{{ data.name }}</td> 
     <td class=""> {{ data.id }} 
     <select ng-model="program" ng-change=""> 
      <option ng-repeat="program in data.programs" ng-selected="{{ program.selected == true }}" selected="" 
       value="{{ program.product_id }}">{{ program.name }}</option> 
     </select> 
     </td> 
    </tr> 
    </table> 
</div> 

Und das JavaScript:

var app = angular.module("myApp", []); 

app.controller('testCtrl', ['$scope', function($scope) { 

    console.log('sdfsdf'); 
    $scope.activePlans = {}; 
    $scope.activePlans.details = { 
    "1": { 
     "id": 1, 
     "name": "breakfast", 
     "product_id": 1, 
     "programs": [{ 
     "product_id": 1, 
     "name": "AA Plan", 
     "selected": true, 
     "selectedOption": 1 
     }, { 
     "product_id": 3, 
     "name": "SS Plan", 
     "selected": false, 
     "selectedOption": 0 
     }, { 
     "product_id": 4, 
     "name": "PP Plan", 
     "selected": false, 
     "selectedOption": 0 
     }] 

    }, 
    "2": { 
     "id": 2, 
     "name": "lunch", 
     "product_id": 3, 
     "programs": [{ 
     "product_id": 1, 
     "name": "AA Plan", 
     "selected": false, 
     "selectedOption": 0 
     }, { 
     "product_id": 3, 
     "name": "SS Plan", 
     "selected": true, 
     "selectedOption": 1 
     }, { 
     "product_id": 4, 
     "name": "PP Plan", 
     "selected": false, 
     "selectedOption": 0 
     }] 
    }, 
    "3": { 
     "id": 3, 
     "name": "dinner", 
     "product_id": 4, 
     "programs": [{ 
     "product_id": 1, 
     "name": "AA Plan", 
     "selected": false, 
     "selectedOption": 0 
     }, { 
     "product_id": 3, 
     "name": "SS Plan", 
     "selected": false, 
     "selectedOption": 0 
     }, { 
     "product_id": 4, 
     "name": "PP Plan", 
     "selected": true, 
     "selectedOption": 1 
     }] 
    }, 
    "4": { 
     "id": 4, 
     "name": "4th meal", 
     "product_id": 5, 
     "programs": [{ 
     "product_id": 1, 
     "name": "AA", 
     "selected": false, 
     "selectedOption": 0 
     }, { 
     "product_id": 3, 
     "name": "SS Plan", 
     "selected": false, 
     "selectedOption": 0 
     }, { 
     "product_id": 4, 
     "name": "PP Plan", 
     "selected": false, 
     "selectedOption": 0 
     }] 
    } 
    } 
    console.log($scope.activePlans.details); 

}]); 

Hier ist die Fiddle

Answer 1

Aktualisieren Sie Ihre <option> Tag wie folgt:

<option ng-repeat="program in data.programs" ng-selected="program.selected == true" value="{{ program.product_id }}">{{ program.name }}</option> 

Updated Fiddle