javascript – AngularJs与selectboxit的问题

2023年3月29日 110次阅读

我的网站上有
selectboxit个组件.采用下一个设计：

《javascript – AngularJs与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
他没有转移到main compareVersionEvent.

请帮我解决这个问题.

最佳答案 尝试在JavaScript中初始化version,version1和version2

并删除html中的“::”

点赞