[英]AngularJs problems with selectboxit
我的网站中有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 。
请帮我解决这个问题。
尝试在JavaScript中初始化version,version1和version2
并删除html中的“::”
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>SelectBoxIt demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />
</head>
<body>
<select name="test">
<option value="SelectBoxIt is:">SelectBoxIt is:</option>
<option value="a jQuery Plugin">a jQuery Plugin</option>
<option value="a Select Box Replacement">a Select Box Replacement</option>
<option value="a Stateful UI Widget">a Stateful UI Widget</option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<script>
$(function() {
var selectBox = $("select").selectBoxIt();
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.