AngularJs problems with selectboxit

Question

I have selectboxit component in my site. With next design:

And I need when I select first select box value render data to first column if select value from second select box render data to second column etc.

My html code:

<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 for change selectBox component:

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 is not working, because in compareVersionEvent not transfer correct data, means what if in second selectBox I select value 1 then in first selectBox I select value 1 he don't transfer to main compareVersionEvent .

Help me please fix this issue.

Answer 1

Try initialize version, version1 and version2 in JavaScript

and remove "::" in html

Answer 2

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

please visit this link http://gregfranko.com/jquery.selectBoxIt.js/

AngularJs problems with selectboxit

Question

2 answers

solution1
3 ACCPTED 2016-02-05 07:58:43

solution2
-2 2016-02-05 07:43:49

AngularJs problems with selectboxit

Question

2 answers

solution1 3 ACCPTED 2016-02-05 07:58:43

solution2 -2 2016-02-05 07:43:49

solution1
3 ACCPTED 2016-02-05 07:58:43

solution2
-2 2016-02-05 07:43:49