I have a selectboxit component on my site. With the following design:
And I need it when I select the first data to display the value of the selection window in the first column, if I select a value from the second window for selecting the rendering data in the second column, etc.
My html code is:
<table>
<tr>
<td>
<div id="appVerFirst">
<select id="appVersionsFirst" ng-model="version" ng-change="compareVersionEvent(version, 1)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::fisrtScoreClass}} total-quality"> {{::fisrtScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::fisrtUsers}}</p> </div>
</td>
<td>
<div id="appVerSecond">
<select id="appVersionsSecond" ng-model="version1" ng-change="compareVersionEvent(version1, 2)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last-1">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::secondScoreClass}} total-quality"> {{::secondScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::secondUsers}}</p> </div>
</td>
<td>
<div id="appVerThird">
<select id="appVersionsThird" ng-model="version2" ng-change="compareVersionEvent(version2, 3)">
<option ng-repeat="app in compareAppVer | orderBy:$index" value="{{::app.version}}" ng-selected="$last-2">
APP vr. {{::app.version}}
</option>
</select>
</div>
<div>
<p>On Range {{::startDay | date:'M/d/yy'}} - {{::currentDate | date:'M/d/yy'}}</p>
<p>Average Score <span class="{{::thierdScoreClass}} total-quality"> {{::thierdScore}}</span>
</p>
</div>
<div> <p>Users on Peak: {{::thierdUsers}}</p> </div>
</td>
</tr>
</table>
And event to change selectBox:
var selectData = function (version) {
var currentData = null;
angular.forEach($scope.compareAppVer, function (data) {
if (data.version === version)
currentData = data;
});
return currentData;
};
$scope.compareVersionEvent = function (version, id) {
var data = selectData(version);
switch (id) {
case 1:
{
$scope.fisrtScore = data.qualityScore;
$scope.fisrtScoreClass = data.qualityScoreClass;
$scope.fisrtUsers = data.activeUsers;
break;
}
case 2:
{
$scope.secondScore = data.qualityScore;
$scope.secondScoreClass = data.qualityScoreClass;
$scope.secondUsers = data.activeUsers;
break;
}
default:
{
$scope.thierdScore = data.qualityScore;
$scope.thierdScoreClass = data.qualityScoreClass;
$scope.thierdUsers = data.activeUsers;
}
}
};
But it does not work, because in compareVersionEvent not share the correct data, means that if the second selectBox I choose the value 1
in the first selectBox I choose the value of 1
, he does not go to the main compareVersionEvent .
Help me fix this problem.