Is there any tag to create a multi select dropdown with checkboxes without writing the directive in AngularJS ? Thanks.
AngularJS Dropdown Multiselect
// HTML
<div ng-dropdown-multiselect="" options="example8data" selected-
model="example8model" extra-settings="example8settings">
</div>
// JavaScript
$scope.example8model = [];
$scope.example8data = [
{id: 1, label: "David"},
{id: 2, label: "Jhon"},
{id: 3, label: "Danny"}
];
$scope.example8settings = { checkBoxes: true, };
Not as a standard no.
You could create you're own directive or use an excisting one if you don't want to write your own like you stated.
Have a look at AngularJS Dropdown Multiselect, and use the option checkboxes.
You can also manage something like implemented in demo below.
'use strict';
angular.module('multiSelectDemo', [ 'shalotelli-angular-multiselect' ])
.controller('MainCtrl', [ '$scope', function ($scope) {
$scope.multiSelectData = [
{ id: 1, label: 'Option 1' },
{ id: 2, label: 'Option 2'},
{ id: 3, label: 'Option 3' },
{ id: 999, label: 'Other', isOther: true}
];
$scope.selectedItems = [
{ id: 1, label: 'Option 1' }
]
$scope.multiSelectOutput = [];
}]).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://*./**',
'https://rawgit.com/**',
'http://rawgit.com/**'
]);
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//rawgit.com/ncapito/angular-multiselect/master/multiselect.js"></script>
<link rel="stylesheet" href="//rawgit.com/ncapito/angular-multiselect/master/styles/multi-select.css" />
<script src="script.js"></script>
</head>
<body ng-app="multiSelectDemo">
<div class="container">
<h1>Shalotelli Angular Multiselect</h1>
<div ng-controller="MainCtrl">
<multi-select
values="multiSelectData"
model="selectedItems"
show-filters="true"
show-other="true"
other-ng-model="other"
other-field="isOther"
other-event="keyup"
value-field="id"
label-field="label"
template-path="http://rawgit.com/ncapito/angular-multiselect/master/views/directives/multi-select.html"></multi-select>
<hr />
<p>Multi Select Data: </p>
<pre>{{multiSelectData}}</pre>
<p></p>
<hr />
<p>Multi Select Output: </p>
<pre>{{selectedItems}}</pre>
<p></p>
</div>
</div>
</body>
</html>
Regards.
Related
I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/
the problem I am facing is the option attribute that is not binding to the model
<div style="margin: 5%" checkboxes="true"
ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
For example:
if model is :
$scope.example1model = [];
$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
Issue:
the binding for options doesn't seems to work correctly as I am getting only Id(s) rest is working fine, if I check David and John ,the options binding with $scope.example1model show only the id not the label
i.e : [{"id":1},{"id":2}
but what I want is
[
{
"id": 1,
"label": "David"
},
{
"id": 2,
"label": "John"
}
]
Set externalIdProp as empty string
$scope.extraSettings = {
externalIdProp: ''
};
html
<div ng-dropdown-multiselect="" options="options" selected-model="myModel" extra-settings="extraSettings"></div>
Works for me, I'm using ^1.11.8
you can try like below.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app ="sortApp" ng-controller ="mainController">
<!DOCTYPE html>
<html lang="eng-US">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<select class="multiselect" data-placeholder="Select Products"
ng-model="example1model" ng-options="item as item.label for item in example1data"
multiple="multiple" multiselect-dropdown >
</select>
{{example1model}}
<div style="margin: 5%" checkboxes="true" ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
</body>
</html>
</div>
<script>
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.example1model = [];
$scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
});
</script>
</body>
</html>
I just started trying our lumX. I am trying to use the datatable from this link.
But I think the controller data is not binding. I am new to AngularJs so any help would be appreciated.
I have attached the screenshot of output.
Following is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LumX</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
<div class="toolbar has-divider has-divider--dark">
<div class="toolbar__label pl">
<span>{{ vm.selectedRows.length || 0 }} selected item(s)</span>
</div>
<div class="toolbar__right">
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length === 1">
<i class="mdi mdi-pencil"></i>
</lx-button>
<lx-button lx-size="l" lx-color="grey" lx-type="icon" ng-if="vm.selectedRows.length >= 1">
<i class="mdi mdi-delete"></i>
</lx-button>
</div>
</div>
<lx-data-table id="lolo" lx-selectable="true" lx-thead="vm.dataTableThead" lx-tbody="vm.dataTableTbody"></lx-data-table>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
<script src="app.js"></script>
<script src="datatable.js"></script>
</body>
</html>
app.js
(function()
{
'use strict';
angular
.module('lumxdemo', [
'lumx',
'Controllers'
]);
angular.module('Controllers', []);
})();
datatable.js
(function()
{
'use strict';
angular
.module('Controllers')
.controller('DemoDataTableController', DemoDataTableController);
DemoDataTableController.$inject = ['$filter', '$scope'];
function DemoDataTableController($filter, $scope)
{
var vm = this;
vm.dataTableThead = [
{
name: 'dessert',
label: 'Dessert',
sortable: true
},
{
name: 'calories',
label: 'Calories',
sortable: true
},
{
name: 'fat',
label: 'Fat (g)',
sortable: true,
sort: 'asc'
},
{
name: 'comments',
label: 'Comments',
icon: 'comment-text',
sortable: false
}];
vm.advancedDataTableThead = angular.copy(vm.dataTableThead);
vm.advancedDataTableThead.unshift(
{
name: 'image',
format: function(row)
{
return '<img src="' + row.image + '" width="40" height="40" class="img-round">';
}
});
vm.dataTableTbody = [
{
id: 1,
image: '/images/placeholder/1-square.jpg',
dessert: 'Frozen yogurt',
calories: 159,
fat: 6.0,
comments: 'Lorem ipsum'
},
{
id: 2,
image: '/images/placeholder/2-square.jpg',
dessert: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
comments: 'Lorem ipsum',
lxDataTableDisabled: true
},
{
id: 3,
image: '/images/placeholder/3-square.jpg',
dessert: 'Eclair',
calories: 262,
fat: 16.0,
comments: 'Lorem ipsum'
}];
$scope.$on('lx-data-table__select', updateActions);
$scope.$on('lx-data-table__unselect', updateActions);
$scope.$on('lx-data-table__sort', updateSort);
////////////
function updateActions(_event, _selectedRows)
{
vm.selectedRows = _selectedRows;
}
function updateSort(_event, _column)
{
vm.dataTableTbody = $filter('orderBy')(vm.dataTableTbody, _column.name, _column.sort === 'desc' ? true : false);
}
}
})();
Looks like you're just missing an ng-controller in your example so the data can bind correctly.
If you add it to the <body> element for example, it should work as expected.
So change:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }">
to:
<body ng-app="lumxdemo" ng-class="{ 'home': $state.current.name === 'app.home' }" ng-controller="DemoDataTableController as vm">
I have a situation where there are 3 check box ("initially checked"). Since it as 3 check box it will use ng-repeat for 3 time and loops the division for there time. Now once i uncheck any of the check box it should display div for 2 time. So far ,
$scope.items = [
{id: 0, title: "apple",selected:true},
{id: 1, title: "orange",selected:true},
{id: 2, title: "grapes",selected:true},
];
On ng-click in each check box i have called a function test("apple").
$scope.test = function(vals) {
$scope.vl=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].title == vals) {
console.log("dnt push");
}
else {
$scope.vl.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vl array");
console.log($scope.vl);
}
Problem I am facing is it works fine for 1st uncheck but not when i do for multiple uncheck. When i check unchecked its not loading div.
In HTML I am using like,
<div ng-repeat="item in vl"> some tags </div>
not quite sure about your question, but hope my answer can give you some hints.
plunker demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.items = [{
id: 0,
title: "apple",
selected: true
}, {
id: 1,
title: "orange",
selected: true
}, {
id: 2,
title: "grapes",
selected: true
}];
});
<!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.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected">{{item.title}}
</div>
{{items | json}}
</body>
</html>
If and only if you want to put in an array the item who are checked :
http://plnkr.co/edit/DvoPBBvKf3AhYM4qcBhx?p=preview
html
<div ng-repeat="item in items">
<input type="checkbox"
ng-model="item.selected" ng-click="test(item.title)"> {{item.title}}
</div>
controller
$scope.test = function(vals) {
$scope.vl=[];
$scope.vlChecked=[];
for(var i=0;i<$scope.items.length;i++) {
if($scope.items[i].selected) {
$scope.vlChecked.push({
id: $scope.items[i].id,
title: $scope.items[i].title,
selected:true
});
}
}
console.log("vlChecked array");
console.log(JSON.stringify($scope.vlChecked));
}
I am using ui-grid for testing purpose. I added a checkbox on each row and a select on header.
HTML
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
name: 'Items',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{value: '0', label: 'Unselect'},
{value: '1', label: 'Selected'}
]
},
cellTemplate: '<input type="checkbox" name="select_item"/>'
},
{
name: 'Name',
field: 'name'
},
{
name: 'Age',
field: 'age'
}
]
};
$scope.gridOptions.data = [
{ name: 'User 1', age: 20},
{ name: 'User 2', age: 30},
{ name: 'User 3', age: 40}
];
}]);
And this is the result
So how can I filter items by checked/uncheck checkbox? I only want to see all checked or unchecked items using filter.
I added the attribute selected to your data in order to be able to filter using the checkbox. You can delete it if you want to send data to the server.
modifications:
template:
`cellTemplate: '<input type="checkbox" name="select_item" value="true" ng-model="row.entity.selected"/>`'
data:
$scope.gridOptions.data = [
{ name: 'User 1', age: 20,selected:false},
{ name: 'User 2', age: 30,selected:false},
{ name: 'User 3', age: 40,selected:false}
];
here is a plunnker: pluncker
But,I recommand to use the selector of the ui-grid: tutorial of ui-grid selector
I am not able to get the kendo-grid on my html screen. It does not shows any error but does not shows the outut as well.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="KendoDemos">
<h1>Customer list</h1>
<div ng-controller="CustomerController">
<!--<kendo-grid options="mainGridOptions">
</kendo-grid>-->
<div ng-controller="CustomerController" id="myKendoDemos" kendo-grid k-data-source="gridData" k-columns="gridColumns"></div>
</div>
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<!--<script src="Scripts/kendo/2014.2.716/kendo.grid.min.js"></script>
<script src="Scripts/kendo/2014.2.716/kendo.core.min.js"></script>-->
<script>
var app = angular.module("KendoDemos", ["ngRoute"]);
app.controller("CustomerController", function ($scope) {
$scope.gridData = [
{ customerId: 1, customerName: 'shikhar1' },
{ customerId: 2, customerName: 'shikhar2' },
{ customerId: 3, customerName: 'shikhar3' },
{ customerId: 4, customerName: 'shikhar4' }
//{
//dataSource: "http://localhost:58816/api/Values"
// }
];
$scope.gridColumns = [{
field: "customerId",
title: "customerId",
width: "120px"
}, {
field: "customerName",
title: "customerName",
width: "120px"
}];
});
</script>
</body>
</html>
First of all since you are using kendo-grid, k-data-source and k-columns which are directives, you need to add kendo.directives as an app dependency
var app = angular.module("KendoDemos", ["ngRoute", "kendo.directives"]);
Here's a Working Plunk of a Kendo Grid using your options. Hope this helps