文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJs与selectboxit的问题

问AngularJs与selectboxit的问题
EN

Stack Overflow用户

提问于 2016-02-05 07:38:58

回答 2查看 360关注 0票数 4

我的站点中有选择箱组件。下一个设计：

当我选择第一个复选框值呈现数据到第一列，如果选择值从第二个复选框呈现数据到第二列等等。

我的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.

请帮我解决这个问题。

selectboxit

javascript

jquery

angularjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-05 07:58:43

尝试初始化版本、version1和version2中的JavaScript

并删除html中的"::“

票数 3

Stack Overflow用户

发布于 2016-02-05 07:43:49

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

请访问此链接http://gregfranko.com/jquery.selectBoxIt.js/

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35218677

复制

相似问题

问AngularJs与selectboxit的问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs与selectboxit的问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs与selectboxit的问题
EN