AngularJs selectboxit 问题

Question

我的站点中有 selectboxit 组件。下一个设计：

我需要当我 select 第一个 select 框值将数据呈现到第一列时，如果 select 来自第二个 select 框的值将数据呈现到第二列等。

我的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 I select 值 1 然后在第一个 selectBox I select 值 1 他不转移到 main compareVersionEvent.

请帮我解决这个问题。

Answer 1

    <!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>

请访问此linkhttp://gregfranko.com/jquery.selectBoxIt.js/

Answer 2

尝试在 JavaScript

中初始化版本、version1 和 version2

并删除 html

中的“::”

AngularJs selectboxit 问题

AngularJs problems with selectboxit

javascript

jquery

angularjs

selectboxit