Question

我正在尝试使用angular.js在移动kendo ui中的抽屉内构建下拉列表。如果我不使用带有硬编码选项的数据源但在使用数据源时不起作用，它可以正常工作。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <style>
        html, body {
            height: 100%;
            margin:0;
        }
    </style>
</head>
<body>
<div kendo-mobile-application ng-app="kendoDemo">
    <kendo-mobile-view id="two-drawer-home" k-title="'Validations List'" ng-controller="main">
        <kendo-mobile-header>
            <kendo-mobile-nav-bar>
                <kendo-mobile-back-button id="back-button" class="nav-button" k-align="'left'">Back</kendo-mobile-back-button>
                <kendo-view-title></kendo-view-title>
                <kendo-mobile-button k-rel="'drawer'" href="#right-drawer" k-icon="'share'" k-align="'right'" ></kendo-mobile-button>
            </kendo-mobile-nav-bar>
        </kendo-mobile-header>

        <kendo-mobile-list-view k-data-source="source" k-template="inboxItem" class="inboxList" id=""></kendo-mobile-list-view>
    </kendo-mobile-view>


    <kendo-mobile-drawer id="right-drawer" style="width: 280px" k-title="'Search'" k-position="'left'" k-views="['two-drawer-home']">
        <kendo-mobile-header>
            <kendo-mobile-nav-bar>
                <kendo-view-title></kendo-view-title>
            </kendo-mobile-nav-bar>
        </kendo-mobile-header>

        <div class="boxc-col">
            <h4>Remote data</h4>
            <label>Product:</label>
            <select kendo-combo-box
                    k-placeholder="'Select product'"
                    k-data-text-field="'ProductName'"
                    k-data-value-field="'ProductID'"
                    k-filter="'contains'"
                    k-auto-bind="false"
                    k-min-length="3"
                    k-data-source="productsDataSource"
                    style="width: 200px;" >
            </select>
        </div>
    </kendo-mobile-drawer>

    <script type="script/x-kendo-template" id="inboxItem">
        <p class="time">{{dataItem.currentTime}}&nbsp;&nbsp;by&nbsp;{{dataItem.From}}</p>
        <a class="reply"
           kendo-mobile-button
           k-rel="'actionsheet'"
           href="\#inboxActions"
           k-actionsheet-context="{{dataItem.ID}}">Options</a>
        <h3>{{dataItem.EntryTicket}} {{dataItem.entryHour}}</h3>
       <p>{{dataItem.company}} {{dataItem.discount}}</p>
    </script>

    <script>
        angular.module('kendoDemo', ['kendo.directives']).controller("main", function($scope) {

            $scope.productsDataSource = {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                    }
                }
            };


            $scope.inboxItem = $("#inboxItem").html();

            var data = [
                {
                    ID: 1,
                    From: "John1 Doe",
                    EntryTicket: "109",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 2,
                    From: "Sarah Connor",
                    EntryTicket: "110",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 3,
                    From: "Jane Parker",
                    EntryTicket: "111",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 4,
                    From: "Joe Harper",
                    EntryTicket: "112",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 5,
                    From: "Becky Thatcher",
                    EntryTicket: "113",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 1,
                    From: "John Doe",
                    EntryTicket: "109",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 2,
                    From: "Sarah Connor",
                    EntryTicket: "110",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 3,
                    From: "Jane Parker",
                    EntryTicket: "111",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 4,
                    From: "Joe Harper",
                    EntryTicket: "112",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 5,
                    From: "Becky Thatcher",
                    EntryTicket: "113",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 1,
                    From: "John Doe",
                    EntryTicket: "109",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 2,
                    From: "Sarah Connor",
                    EntryTicket: "110",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 3,
                    From: "Jane Parker",
                    EntryTicket: "111",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 4,
                    From: "Joe Harper",
                    EntryTicket: "112",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 5,
                    From: "Becky Thatcher",
                    EntryTicket: "113",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 1,
                    From: "John Doe",
                    EntryTicket: "109",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 2,
                    From: "Sarah Connor",
                    EntryTicket: "110",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 3,
                    From: "Jane Parker",
                    EntryTicket: "111",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 4,
                    From: "Joe Harper",
                    EntryTicket: "112",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                },
                {
                    ID: 5,
                    From: "Becky Thatcher",
                    EntryTicket: "113",
                    entryHour: "12/02/2015-19:15",
                    currentTime: "12/02/2015-07:56",
                    company:"Park&Click",
                    discount:"discount 50%"
                }
            ];

            $scope.source = new kendo.data.DataSource({
                data: data,
                pageSize: 21
            });

            $scope.onOpen = function(e) {
                e.sender.element.find(".km-actionsheet-title").text(e.target.next().text());
            }

            $scope.reply = function(e) {
                $("#actionResult").html("Replying to message #" + e.context);
            }

            $scope.replyAll = function(e) {
                $("#actionResult").html("Replying to all in message #" + e.context);
            }

            $scope.archive = function(e) {
                $("#actionResult").html("Archiving message #" + e.context);
            }
        });

    </script>

    <style>
        .km-root .left-btn
        {
            position: absolute;
            z-index: 9999;
            top: 7em;
            left: -1em;
            padding-right: 0;
            padding-left: 0;
            width: 5em;
            line-height: 4em;
            border-radius: 10em;
            -webkit-border-radius: 10em;
            border: 1px solid rgba(255,255,255,.8);
            background: rgba(0,0,0,.8);
            color: #fff;
            box-shadow: 0 0 .5em #000;
            -webkit-box-shadow: 0 0 .6em #222;
        }

        .mobileExample .km-wp-light .km-button.left-btn
        {
            background: rgba(0,0,0,.8);
            text-align: center;
        }

        .km-root .left-btn .km-icon.km-notext
        {
            display: block;
            margin: 1em auto;
        }

        .km-ios #left-drawer .km-content, .km-ios7 #left-drawer .km-content, .km-android #left-drawer .km-content, .km-blackberry #left-drawer .km-content,
        .km-ios #left-drawer .km-list > li, .km-ios7 #left-drawer .km-list > li, .km-android #left-drawer .km-list > li, .km-blackberry #left-drawer .km-list > li,
        .km-ios #left-drawer .km-listview-link > .km-icon, .km-ios7 #left-drawer .km-listview-link > .km-icon, .km-android #left-drawer .km-listview-link > .km-icon, .km-blackberry #left-drawer .km-listview-link > .km-icon,
        .km-ios #left-drawer .km-list li > .km-icon, .km-ios7 #left-drawer .km-list li > .km-icon, .km-android #left-drawer .km-list li > .km-icon, .km-blackberry #left-drawer .km-list li > .km-icon,
        #right-drawer .km-content
        {
            background-color: #4e4e4e;
            color: #fff;
        }

        .km-ios #left-drawer .km-group-title,
        .km-ios7 #left-drawer .km-group-title,
        .km-blackberry #left-drawer .km-group-title
        {
            background-color: #6e6e6e;
            color: #fff;
        }

        #left-drawer .km-navbar, #right-drawer .km-navbar,
        .km-tablet .km-ios #left-drawer .km-view-title,
        .km-tablet .km-ios #right-drawer .km-view-title,
        .km-ios7 #left-drawer .km-view-title,
        .km-ios7 #right-drawer .km-view-title,
        .km-tablet .km-ios7 #left-drawer .km-view-title,
        .km-tablet .km-ios7 #right-drawer .km-view-title
        {
            background-color: #2e2e2e;
            color: #fff;
            text-shadow: 0 -1px rgba(0,0,0,.5);
        }

        .km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
        .km-contacts:before, .km-contacts:after { content: "\E0E4"; }
        .km-camera:before, .km-camera:after { content: "\E0D0"; }
        .km-printer:before, .km-printer:after { content: "\E07E"; }
        .km-comments:before, .km-comments:after { content: "\E093"; }
        .km-graph:before, .km-graph:after { content: "\E04B"; }


        #two-drawer-home h2
        {
            display: inline-block;
            font-size: 1em;
            line-height: 3em;
            margin: 0 0 0 1em;
        }

        #two-drawer-home img
        {
            float: left;
            width: 3em;
            height: 3em;
            margin: 0;
            border: 1px solid rgba(0,0,0,.2);
            -webkit-border-radius: 4em;
            border-radius: 4em;
        }

        .km-ios #two-drawer-home .km-listview
        {
            background-color: #eaf1f5;
        }
    </style>

    <style scoped>
        .navbar-icon{
            float:left;
            margin-left: 10px;
        }
        #layoutView .km-view-title
        {
            visibility: inherit;
        }

        .km-android #layoutView .km-view-title
        {
            display: block;
            position: static;
        }

        .reply {
            float: right;
        }

        .inboxList
        {
            font-size: .8em;
        }

        .km-ios #actionsheet-view .km-listview
        {
            background: url(../content/shared/images/patterns/pattern8.png);
        }

        .inboxList p,
        .inboxList h2,
        .inboxList h3
        {
            margin: 5px 2px;
        }

        .inboxList p,
        .inboxList h3
        {
            color: #777;
        }

        .inboxList h3.time
        {
            color: #369;
            float: left;
            margin-right: 10px;
        }

        #actionResult
        {
            padding: 10px;
            background: rgba(127,127,127,.5);
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            margin: 0;
        }

        .km-ios #actionsheet-view .km-navbar
        {
            background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0))), url(../content/shared/images/patterns/pattern7.png);
            background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.45) 6%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(100, 100, 100, 0)), url(../content/shared/images/patterns/pattern7.png);
        }

        .km-ios #actionsheet-view .km-navbar .km-button
        {
            background-color: #4A88B5;
        }

        .km-ios #actionsheet-view .km-content .km-button {
            background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0))), url(../content/shared/images/patterns/pattern1.png);
            background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.45) 6%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(100, 100, 100, 0)), url(../content/shared/images/patterns/pattern1.png);
        }
        .km-tablet .km-ios #actionsheet-view .km-view-title {
            color: #fff;
            text-shadow: 0 -1px rgba(0,0,0,.5);
        }
    </style>



</body>
</html>

Answer 1

这是我的解决方案。我工作，但下拉列表适用于移动设备，如桌面。我的意思是没有用于选择Android的radiobuttons。我是kendo ui的新手。有人可以帮忙吗？

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/drawer/angular">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<div kendo-mobile-application ng-app="kendoDemo" ng-controller="MyCtrl">
<kendo-mobile-view id="two-drawer-home" k-title="'Friends'">
    <kendo-mobile-header>
        <kendo-mobile-nav-bar>
            <kendo-mobile-back-button id="back-button" class="nav-button" k-align="'left'">Back</kendo-mobile-back-button>
            <kendo-view-title></kendo-view-title>
            <kendo-mobile-button k-rel="'drawer'" href="#right-drawer" k-icon="'share'" k-align="'right'" ></a>
        </kendo-mobile-nav-bar>
    </kendo-mobile-header>

    <kendo-mobile-list-view k-type="'group'">
        <li>
            A
            <ul>
                <li><h2>Ann Devon</h2><img src="../content/mobile/overview/ann.jpg" /></li>
                <li><h2>Annette Roulet</h2><img src="../content/mobile/overview/annette.jpg" /></li>
                <li><h2>Antonio Moreno</h2><img src="../content/mobile/overview/antonio.jpg" /></li>
            </ul>
        </li>
        <li>
            C
            <ul>
                <li><h2>Carine Schmitt</h2><img src="../content/mobile/overview/carine.jpg" /></li>
                <li><h2>Catherine Dewey</h2><img src="../content/mobile/overview/catherine.jpg" /></li>
            </ul>
        </li>
        <li>
           D
            <ul>
                <li><h2>Daniel Tonini</h2><img src="../content/mobile/overview/daniel.jpg" /></li>
                <li><h2>Diego Roel</h2><img src="../content/mobile/overview/diego.jpg" /></li>
            </ul>
        </li>
        <li>
            E
            <ul>
                <li><h2>Eduardo Saavedra</h2><img src="../content/mobile/overview/eduardo.jpg" /></li>
                <li><h2>Elizabeth Brown</h2><img src="../content/mobile/overview/elizabeth.jpg" /></li>
            </ul>
        </li>
        <li>
            F
            <ul>
                <li><h2>Felipe Izquierdo</h2><img src="../content/mobile/overview/felipe.jpg" /></li>
                <li><h2>Fran Wilson</h2><img src="../content/mobile/overview/fran.jpg" /></li>
                <li><h2>Francisco Chang</h2><img src="../content/mobile/overview/francisco.jpg" /></li>
            </ul>
        </li>
    </kendo-mobile-list-view>
</kendo-mobile-view>


<kendo-mobile-drawer id="right-drawer" style="width: 280px" k-title="'Share'" k-position="'left'" k-views="['two-drawer-home']">
    <kendo-mobile-header>
        <kendo-mobile-nav-bar>
            <kendo-view-title></kendo-view-title>
        </kendo-mobile-nav-bar>
    </kendo-mobile-header>

    <div class="box-col">
        <h4>Remote data</h4>
        <select kendo-drop-down-list
                k-data-text-field="'ContactName'"
                k-data-value-field="'CustomerID'"
                k-data-source="customersDataSource"
                style="width: 200px"></select>
      </div>
</kendo-mobile-drawer>

<script>
    angular.module("kendoDemo", ["kendo.directives"])
     .controller("MyCtrl", function ($scope) {
                 $scope.customersDataSource = {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "http://demos.telerik.com/kendo-ui/service/Customers"
                        }
                    }
                };
          });
</script>

<style>
    .km-root .left-btn
    {
        position: absolute;
        z-index: 9999;
        top: 7em;
        left: -1em;
        padding-right: 0;
        padding-left: 0;
        width: 5em;
        line-height: 4em;
        border-radius: 10em;
        -webkit-border-radius: 10em;
        border: 1px solid rgba(255,255,255,.8);
        background: rgba(0,0,0,.8);
        color: #fff;
        box-shadow: 0 0 .5em #000;
        -webkit-box-shadow: 0 0 .6em #222;
    }

    .mobileExample .km-wp-light .km-button.left-btn
    {
        background: rgba(0,0,0,.8);
        text-align: center;
    }

    .km-root .left-btn .km-icon.km-notext
    {
        display: block;
        margin: 1em auto;
    }

    .km-ios #left-drawer .km-content, .km-ios7 #left-drawer .km-content, .km-android #left-drawer .km-content, .km-blackberry #left-drawer .km-content,
    .km-ios #left-drawer .km-list > li, .km-ios7 #left-drawer .km-list > li, .km-android #left-drawer .km-list > li, .km-blackberry #left-drawer .km-list > li,
    .km-ios #left-drawer .km-listview-link > .km-icon, .km-ios7 #left-drawer .km-listview-link > .km-icon, .km-android #left-drawer .km-listview-link > .km-icon, .km-blackberry #left-drawer .km-listview-link > .km-icon,
    .km-ios #left-drawer .km-list li > .km-icon, .km-ios7 #left-drawer .km-list li > .km-icon, .km-android #left-drawer .km-list li > .km-icon, .km-blackberry #left-drawer .km-list li > .km-icon,
    #right-drawer .km-content
    {
        background-color: #4e4e4e;
        color: #fff;
    }

    .km-ios #left-drawer .km-group-title,
    .km-ios7 #left-drawer .km-group-title,
    .km-blackberry #left-drawer .km-group-title
    {
        background-color: #6e6e6e;
        color: #fff;
    }

    #left-drawer .km-navbar, #right-drawer .km-navbar,
    .km-tablet .km-ios #left-drawer .km-view-title,
    .km-tablet .km-ios #right-drawer .km-view-title,
    .km-ios7 #left-drawer .km-view-title,
    .km-ios7 #right-drawer .km-view-title,
    .km-tablet .km-ios7 #left-drawer .km-view-title,
    .km-tablet .km-ios7 #right-drawer .km-view-title
    {
    background-color: #2e2e2e;
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }

    .km-drawer-button:before, .km-drawer-button:after { content: "\E077"; }
    .km-contacts:before, .km-contacts:after { content: "\E0E4"; }
    .km-camera:before, .km-camera:after { content: "\E0D0"; }
    .km-printer:before, .km-printer:after { content: "\E07E"; }
    .km-comments:before, .km-comments:after { content: "\E093"; }
    .km-graph:before, .km-graph:after { content: "\E04B"; }


    #two-drawer-home h2
    {
        display: inline-block;
        font-size: 1em;
        line-height: 3em;
        margin: 0 0 0 1em;
    }

    #two-drawer-home img
    {
        float: left;
        width: 3em;
        height: 3em;
        margin: 0;
        border: 1px solid rgba(0,0,0,.2);
        -webkit-border-radius: 4em;
        border-radius: 4em;
    }

    .km-ios #two-drawer-home .km-listview
    {
        background-color: #eaf1f5;
    }
</style>


</body>
</html>

数据源下拉列表在抽屉内不起作用

1 个答案: