How to get selected options in a group of selects with angularJS

Question

I have a group of two selects. The first one is the name of a topic and the second one is its rate (wich can be major or important). And I can add more topics (more groups of those two selects). I'm new in angularJS and I'm trying to figure out how to get the selected options in those groups.

This is what I have:

Controller

function MyCtrl($scope) {
$scope.topic_rows = [{
    executive_pay_ratio: [{
        topic_cd: 't1',
        topic_name: 'topic 1'
    },
    {
        topic_cd: 't2',
        topic_name: 'topic 2'
    },
    {
        topic_cd: 't3',
        topic_name: 'topic 3'
    },
    {
        topic_cd: 't4',
        topic_name: 'topic 4'
    }],
    rate_order_interest: [{
        rate_cd: 'i',
        rate_name: 'important'
    },
    {
        rate_cd: 'm',
        rate_name: 'major'
    }]
}];

$scope.currentTopic_rows = [{
    executive_pay_ratio: [{
        topic_cd: 't1',
        topic_name: 'topic 1'
    }],
    rate_order_interest: [{
        rate_cd: 'i',
        rate_name: 'important'
    }]
}];

$scope.add_topic = function () {
    $scope.topic_rows.push({
        executive_pay_ratio: [{
            topic_cd: 't1',
            topic_name: 'topic 1'
        },
        {
            topic_cd: 't2',
            topic_name: 'topic 2'
        },
        {
            topic_cd: 't3',
            topic_name: 'topic 3'
        },
        {
            topic_cd: 't4',
            topic_name: 'topic 4'
        }],
        rate_order_interest: [{
            rate_cd: 'i',
            rate_name: 'important'
        },
        {
            rate_cd: 'm',
            rate_name: 'major'
        }]
    });
};

}

View

<div ng-controller="MyCtrl">
  <fieldset ng-repeat="topic_row in topic_rows">
        <select id="select_topic_{{$index}}">
            <option ng-repeat="topic in topic_row.executive_pay_ratio" ng-model="currentTopic_rows[executive_pay_ratio]" value="{{topic.topic_cd}}">{{topic.topic_name}}</option>
        </select>
        <select id="select_topic_{{$index}}_value">
            <option ng-repeat="rate in topic_row.rate_order_interest" ng-model="currentTopic_rows.rate_order_interest" value="{{rate.rate_cd}}">{{rate.rate_name}}</option>
        </select>
    </fieldset>
    <a href="" title="Add topic" ng-click="add_topic()">Add topic</a>
</div>

Example: http://jsfiddle.net/97h62/68/

Thanks.

There is something called ng-options in angular. Have a look at it. — paje007
– paje007, Commented Feb 11, 2015 at 12:25

DonJuwe · Accepted Answer · 2015-02-11 12:27:27Z

1

Just add e.g. ng-model="myModel" to your selects. The selected options' value cann be accessed like e.g. $scope.myModel in your controller.

Updated your Fiddle.

answered Feb 11, 2015 at 12:27

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

How to get selected options in a group of selects with angularJS

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