javascript - 使用angular-winjs ListView时无法获得选择

Question

我正在使用 angular-winjs显示列表。 HTML 以及 Controller 代码如下。当我单击该项目时，未设置选择。因此， watch 永远不会被调用。

如何获取selection变量中的选中项？我的代码看起来类似于 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');
        })
    }]);

图 block 正确显示如下。您可能会注意到，由于设置了选择，中心 图 block (带有蓝色边框的图 block )被选中。但任何其他选择仍显示相同的值 - 选择任何其他项目不会设置选择。

库如下:

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

工作代码 JSFiddle

WinJS ListView Interaction Examples (从下拉列表中选择)