CODEWITHSUNDEEP
javascriptangularjs
Karan
Karan

Reputation: 1108

Get the value of ng-model inside ng-repeat

In my Angularjs project, I have problem while using ng-model inside ng-repeat. When i select the value in select box, the selectbox automatically gets selected with previous selected value. I think this is due to the same ng-model inside ng-repeat. How can we fix this issue?

HTML:

<div ng-repeat="x in data">
    <select class="selectbox_menulist"  ng-change="endpoint.showEndPointStatsData()" ng-model="graphSelect.value">
        <option ng-repeat="opt in mapOptions" value="{{opt.value}}">{{opt.type}}</option>
    </select>
</div>

JS:

$scope.mapOptions = [
    { value: "bytes",type:"Bytes/sec" },
    { value: "packets",type:"Packets/sec"},
    { value: "megabytes",type:"Megabytes/sec"}
];

 showEndPointStatsData: function() {
        console.log('Function called ====');
        console.log($scope.graphSelect.value);

}

Upvotes: 1

Views: 833

Answers (2)

Kumar Ramalingam
Kumar Ramalingam

Reputation: 394

ng-model inside ng-repeat

jsfiddle

The above link has good description on how to use it with examples

Upvotes: 0

Yin Gang
Yin Gang

Reputation: 1443

Use array to store value of mutli ng-model in ng-repeat:

<div ng-repeat="x in data track by $index">
<select class="selectbox_menulist"  ng-change="endpoint.showEndPointStatsData($index)" ng-model="graphSelect[$index]">
    <option ng-repeat="opt in mapOptions" value="{{opt.value}}">{{opt.type}}</option>
</select>
</div>
  $scope.mapOptions = [{ value: "bytes",type:"Bytes/sec" }, { value: "packets",type:"Packets/sec"},{ value: "megabytes",type:"Megabytes/sec"}];
$scope.graphSelect = new Array($scope.data.length);

showEndPointStatsData: function(index) {
    console.log('Function called ====');
    console.log($scope.graphSelect[index]);

Upvotes: 1

Related Questions