AngularJS select com ng-repeat

by Akram kamal

HTML

<div ng-app>
    <div ng-controller="MyCntrl">selecteds: {{selecteds}}
        <hr/>
        <select ng-repeat="(name, values) in selects" ng-model="selecteds[name]" ng-options="v for v in values">
            <option value="''">pick a {{name}}</option>
        </select>
        <hr />
        <div ng-repeat="p in people | filter:selecteds">{{p.id}} - {{p.color}} - {{p.gender}}</div>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style>

JavaScript

function MyCntrl($scope) {
    $scope.selects = {
        'color': ['', 'red', 'green', 'blue'],
        'gender': ['', '!female', 'female']
    };

    $scope.selecteds = {};
    angular.forEach($scope.selects, function (value, key) {
        $scope.selecteds[key] = value[0];
    });

    $scope.people = [{
        id: 1,
        color: 'blue',
        gender: 'male'
    }, {
        id: 2,
        color: 'red',
        gender: 'female'
    }, {
        id: 3,
        color: 'green',
        gender: 'male'
    }, {
        id: 4,
        color: 'blue',
        gender: 'female'
    }, {
        id: 5,
        color: 'red',
        gender: 'male'
    }, ];

    $scope.mahOi = function () {
        $scope.selecteds.color = 'blue';
    }
}