Question

如何选择多个项目并根据在搜索框中键入内容进行搜索？只有匹配的项目才能在下拉列表中看到。

这是我的工作代码：

 <!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    {{_id}}
    <search items="mydata" 
        prompt="Start typing a US state" 
        title="mydata.displayConfig[0].propertyName" 
        subtitle="abbreviation" id="_id" model="c" 
        on-selectupdate="onItemSelected()"></search>
</body>

</html>

genericsearch.html

<div class="multitext-wrap blue-border">
    <input type="text" ng-model="searchModel" ng-keydown="selected=false" />
    <br/>
    <div class="items" ng-hide="!searchModel.length || selected">
        <div class="item" 
            ng-repeat="item in items" 
            ng-click="handleSelection(item)" 
            ng-class="{active:isCurrent($index)}" 
            ng-mouseenter="setCurrent($index)"
            style="cursor:pointer">
            <p class="tag-label">{{item.name}}</p><span class="tag-cross pointer" ng-click="removeOrg($index);">x</span>
        </div>
    </div>
</div>

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.onItemSelected = function() {
        console.log('on selected', $scope._id);
    };

    $scope.mydata = [
        {
            "_id": "1",
            displayConfig: [{
                    "fieldIndex": 2,
                    "propertyName": "o1",
                    "propertyValue": "sree"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o2",
                    "propertyValue": "sravs"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o3",
                    "propertyValue": "sree"
                },

            ],
            "name": "Alabama",
            "abbreviation": "AL"
        }, {
            "_id": "2",
            displayConfig: [{
                    "fieldIndex": 2,
                    "propertyName": "o1",
                    "propertyValue": "yui"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o2",
                    "propertyValue": "juim"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o3",
                    "propertyValue": "aww"
                },

            ],
            "name": "Alaska",
            "abbreviation": "AK"
        }, {
            "_id": "3",
            displayConfig: [{
                    "fieldIndex": 2,
                    "propertyName": "o1",
                    "propertyValue": "fgt"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o2",
                    "propertyValue": "ertyu"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o3",
                    "propertyValue": "ghytt"
                },
            ],

            "name": "bmerican Samoa",
            "abbreviation": "AS"
        }, {
            "_id": "4",
            displayConfig: [{
                    "fieldIndex": 2,
                    "propertyName": "o1",
                    "propertyValue": "hjjhu"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o2",
                    "propertyValue": "rdrer"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o3",
                    "propertyValue": "xds"
                },
            ],
            "name": "drizona",
            "abbreviation": "AZ"
        }, {
            "_id": "5",
            displayConfig: [{
                    "fieldIndex": 2,
                    "propertyName": "o1",
                    "propertyValue": "errrr"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o2",
                    "propertyValue": "ddd"
                }, {
                    "fieldIndex": 2,
                    "propertyName": "o3",
                    "propertyValue": "nnnn"
                },
            ],
            "name": "crkansas",
            "abbreviation": "AR"
        }

    ];
});


app.directive('search', function($timeout) {
    return {
        restrict: 'AEC',
        scope: {
            items: '=',
            prompt: '@',
            title: '@',
            subtitle: '@',
            model: '=',
            onSelectupdate: '&'
        },
        link: function(scope, elem, attrs) {
            scope.handleSelection = function(selectedItem) {
                scope.model = selectedItem;
                scope.searchModel = selectedItem.name;
                scope.current = 0;
                scope.selected = true;
                $timeout(function() {
                    scope.onSelectupdate();
                }, 200);
            };
            scope.current = 0;
            scope.selected = true;
            scope.isCurrent = function(index) {
                return scope.current == index;
            };
            scope.setCurrent = function(index) {
                scope.current = index;
            };
        },
        templateUrl: 'genericsearch.html'
    }
})

如何在custom指令中选择多个项目？

0 个答案: