我的站点中有selectboxit组件。下一个设计:
当我选择第一个选择框值渲染数据到第一列时,如果从第二个选择框渲染数据中选择值到第二列等,我需要。
我的html代码:
<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>
以及更改 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;
}
}
};
但它不起作用,因为在compareVersionEvent中没有传输正确的数据,这意味着如果在第二个 selectBox 我选择值1 然后在第一个 selectBox 我选择值1 他不传输到主compareVersionEvent。
请帮我解决这个问题。