Question

我必须通过ui-select创建一个指令（包装器）以方便客户。此下拉列表的值将包含3个部分 1.教师 2.主题 3.学生

要求：

标题不可选（应禁用），因此您只能从下拉列表中选择任何部分下的值。我能做到这一点。
它应该是多选的。用户可以选择教师，学生或科目。这适用于Visual Studio。
用户输入时的过滤
当用户开始输入控件时加载数据。

我创建了一个插件：http://plnkr.co/edit/noB1HhFvvwXZerhsAMIE

CODE 的index.html

  <body ng-controller="MainController">
    <h1>{{ message }}</h1>
    <div>
        <data-multi-select data-model="selectedData"></data-multi-select>
    </div>
  </body>
</html>

的script.js

    (function () {
        var app = angular.module('githubViewer', ['ui.select', 'ngSanitize']);

        var MainController = function ($scope) {
            $scope.selectedData = [];

            $scope.message = "Github Viewer";
        };

        app.controller("MainController", MainController);
    }());


multiSelectControl.js
'use strict';

(function () {
    var app = angular.module("githubViewer");

    app.directive('multiSelect', function () {
        return {
            restrict: 'E',
            templateUrl: 'multiSelectTemplate.html',
            scope: {
                ngModel : '=',
            },
            link: function(scope) {
                scope.data = [];

                scope.teachers = [{ Data: "Teacher1", Title: "teacher" }, { Data: "Teacher2", Title: "Teacher" }, { Data: "Teacher3", Title: "Teacher" }];
                scope.subjects = [{ Data: "Subject1", Title: "Subject" }, { Data: "Subject2", Title: "Subject" }, { Data: "Subject3", Title: "Subject" }];
                scope.stidents = [{ Data: "Student1", Title: "Student" }, { Data: "Student2", Title: "Student" }, { Data: "Student3", Title: "Student" }];

                scope.data.push({ Data: "Teachers", Title: "Title"});
                angular.forEach(scope.teachers, function (value, key) {
                    scope.data.push(value);
                });

                scope.data.push({ Data: "Subjects", Title: "Title" });
                angular.forEach(scope.subjects, function (value, key) {
                    scope.data.push(value);
                });

                scope.data.push({ Data: "Students", Title: "Title" });
                angular.forEach(scope.students, function (value, key) {
                    scope.data.push(value);
                });
            }
        };
    });

    app.filter('propsFilter', function () {
        return function (items, props) {
            var out = [];

            if (angular.isArray(items)) {
                items.forEach(function (item) {
                    var itemMatches = false;

                    var keys = Object.keys(props);
                    for (var i = 0; i < keys.length; i++) {
                        var prop = keys[i];
                        var text = props[prop].toLowerCase();
                        if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
                            itemMatches = true;
                            break;
                        }
                    }

                    if (itemMatches) {
                        out.push(item);
                    }
                });
            } else {
                // Let the output be the input untouched
                out = items;
            }

            return out;
        };
    });
})();

multiSelectTemplate.html

<ui-select theme='bootstrap' multiple ng-model="selectedData" style="width: 800px;" ng-disabled="disabled">
    <ui-select-match placeholder="Select Organisation, team, component">{{$item}}</ui-select-match>
    <ui-select-choices repeat="item.Data as item in data track by $index | propsFilter: {Data: $select.search}">
        <div ng-bind-html="item.Data | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

我没有插入所以不会出现下拉但是当我在VS中运行时，下拉工作正常。我可以做多选。

帮助：

我正在尝试过滤用户类型，例如教师姓名或学生姓名。因此，如果某些类型＆＃34; Aba＆＃34;，那么下拉列表应该只有＆＃34; aba＆＃34;在数据栏中。
当用户开始输入时，如何在下拉列表中加载数据。所以下拉列表应该是空白的，当有人开始输入时，下拉列表应该被加载。

如何在ui-select指令中过滤数据

0 个答案: