jquery - How to filter data in ui-select directive -
i have create directive (wrapper) on ui-select ease customer. dropdown have 3 sections in values 1. teachers 2. subjects 3. students
requirements:
- headings not selectable (should disabled) can select values under of sections dropdowns. can achieve.
- it should multi-selectable. user can select either, teacher, student or subject. works in visual studio.
- filtering when user types
- load data when user starts type in control.
i have created plunk: 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); (var = 0; < 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 output 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 item in data track $index | propsfilter: {data: $select.search}"> <div ng-bind-html="item.data | highlight: $select.search"></div> </ui-select-choices> </ui-select> i not plunk drop down not appear when run in vs, drop down working fine. can multiselect.
help:
- i trying filter when user types, e.g. teacher name or student name. if 1 types "aba", dropdown should have values "aba" in data, column.
- how can load data in dropdown when user starts type. dropdown should blank, when starts typing, dropdown should loaded.
Comments
Post a Comment