Skip to content
This repository was archived by the owner on Feb 7, 2023. It is now read-only.

Performance improvement #78

Open
arindrajitb wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Performance improvement #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89c6148
merged from amitava82 master
arindrajitb Jan 3, 2016
d4e1799
code merged from https://github.com/zachlysobey/angular-multiselect a…
arindrajitb Jan 3, 2016
1270b38
removed unwated files
arindrajitb Jan 3, 2016
0f509a5
added onChange event. On every selection change this method is invoke…
arindrajitb Jan 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@ Thumbs.db
# Node Modules Directory #
##########################
/node_modules/*
/bower_components/*

415 changes: 415 additions & 0 deletions .idea/workspace.xml
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions dist/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.fixed-width{
width: 150px;
}

am-multiselect .dropdown-menu > li > .word-wrapped
{
word-wrap: break-word; !important;
word-break: break-all; !important;
white-space: normal; !important;
}
9 changes: 7 additions & 2 deletions dist/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,19 @@ angular.module('app', ['am.multiselect'])
$scope.cars = [
{id:1, name: 'Audi'},
{id:2, name: 'BMW'},
{id:3, name: 'Honda'}
{id:3, name: 'Honda'},
{id:4, name: 'A very very long name with spaces. It never ends at all. Keeps going on and on and on. So what can you do.'},
{id:5, name: 'AndThereComesTheNoSpaceMonsterThatYouHateToSeeInYourWebPageWhatCanYouDoAboutThis'}
];
$scope.selectedCar = [];

$scope.fruits = [
{id: 1, name: 'Apple'},
{id: 2, name: 'Orange'},
{id: 3, name: 'Banana'}
{id: 3, name: 'Banana: with some long story like there usual travel across the atlantic from south worm world to cold dizzy northern world.'}
];
$scope.selectedFruit = null;
$scope.OnSelectionChange = function(event){
console.log(event);
}
}]);
74 changes: 55 additions & 19 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,64 @@
<html ng-app="app">
<head>
<title>Angular multiselect</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="multiselect.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<link rel="stylesheet" href="app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="multiselect.js"></script>
<script src="multiselect-tpls.js"></script>
</head>
<body ng-controller="appCtrl">
<h1>Example</h1>
<am-multiselect class="input-lg" multiple="true" ms-selected ="There are {{selectedCar.length}} car(s) selected"
ng-model="selectedCar" ms-header="Select Some Cars"
options="c.name for c in cars"
change="selected()"></am-multiselect>
<div class="well well-sm">
{{selectedCar}}
</div>
Single select:
<am-multiselect class="input-lg"
ng-model="selectedFruit"
options="c.name for c in fruits"
change="selected()" ></am-multiselect>
<div class="well well-sm">
{{selectedFruit}}
</div>
<h2>Example:Multiple selection with whole object selected items</h2>
<p>
Long List item ( with or without word spacing) are wrapped into multi line.
Width are fixed to 150px.
<pre>
&lt;am-multiselect class="input-lg" multiple="true" ms-selected="There are {{selectedCar.length}} car(s) selected"
ng-model="selectedCar" ms-header="Select Some Cars"
options="c as c.name for c in cars" ms-id="id" list-css="fixed-width" list-item-css="word-wrapped"
change="selected()" onchange="OnSelectionChange(event)"> &lt;/am-multiselect>


With CSS:
.fixed-width
{
width: 150px;
}

am-multiselect .dropdown-menu > li > .word-wrapped
{
word-wrap: break-word; !important;
word-break: break-all; !important;
white-space: normal; !important;
}


</pre>

</p>
<am-multiselect class="input-lg" multiple="true" ms-selected="There are {{selectedCar.length}} car(s) selected"
ng-model="selectedCar" ms-header="Select Some Cars"
options="c as c.name for c in cars" ms-id="id" list-css="fixed-width" list-item-css="word-wrapped"
change="selected()" onchange="OnSelectionChange(event)"></am-multiselect>
<div class="well well-sm">
{{selectedCar}}
</div>
<h2> Single select: with only display attribute as selected item.</h2>
<p>

&lt;am-multiselect class="input-lg"
ng-model="selectedFruit"
options="c.name for c in fruits"
change="selected()"> &lt;/am-multiselect>

</p>
<am-multiselect class="input-lg"
ng-model="selectedFruit"
options="c.name for c in fruits"
change="selected()"></am-multiselect>
<div class="well well-sm">
{{selectedFruit}}
</div>
</body>
</html>
Loading