Question

我正在使用angular-winjs来显示列表。 HTML以及控制器代码如下。单击该项目时，未设置选择。结果，手表永远不会被召唤。

如何在选择变量中获取所选项目？我的代码看起来与this issue类似，但问题仍然存在。我正在使用最新的WinJS。

<div ng-app="myApp">
    <div ng-controller="HomeTilesController">
        <div>Selected count: {{selection.length}}, indexes: {{selection}}</div>
        <win-list-view item-data-source="homeTiles" selection-mode="'single'" selection="selection">
            <win-item-template>
                <div class="tile">
                    <h5 class="win-h5">{{item.data.title}}</</h5>
                </div>
            </win-item-template>
            <win-grid-layout></win-grid-layout>
        </win-list-view>
    </div>
</div>

HomeTilesController：

angular.module('myApp', ['winjs'])
    .controller("HomeTilesController", ['$scope', function ($scope) {
        $scope.homeTiles = [
            { title: 'Agents' },
            { title: 'Center' },
            { title: '' },
            { title: '' },
            { title: '' },
            { title: '' }];

        $scope.selection = [1];

        $scope.$watch('selection', function handleSelectionChange(newValue, oldValue) {
            console.log('item selected');
        })
    }]);

瓷砖正确显示如下。您可能会注意到由于设置选择而选择的中心图块（具有蓝色边框的图块）。但任何其他选择仍显示相同的值 - 选择任何其他项目时不会设置选择。

图书馆如下：

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script src="~/lib/hammer.js/hammer.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>
    <script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script>
    <script src="~/app/my-app.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <script src="~/js/site.js" asp-append-version="true"></script>

Answer 1

您必须使用selection-mode="'single'" tap-behavior="'directSelect'"

var myApp = angular.module("myApp", ['winjs']);
myApp.controller("myCtrl", ['$scope', myCtrl]);

function myCtrl($scope) {
    $scope.selection = [];
    $scope.homeTiles = [{
        title: 'A1'
    }, {
        title: 'A2'
    }, {
        title: 'A3'
    }, {
        title: 'A4'
    }, {
        title: 'A5'
    }, {
        title: 'A6'
    }];
}

HTML

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
        <win-list-view item-data-source="homeTiles" selection="selection" selection-mode="'single'" tap-behavior="'directSelect'" class="listview win-selectionstylefilled">

            <win-item-template>This list view item's rating is: {{item.data.rating}}</win-item-template>
            <win-list-layout></win-list-layout>           
        </win-list-view>
    </div>
</div>

工作代码this

JSFiddle（从下拉列表中选择）

使用angular-winjs ListView

1 个答案: