I'm trying to get the bootstrap multiselect widget to work. It works when I hardcode all the options, like this:
<select id="topic-select" multiple="multiple">
<option val='math'>math</option>
<option val='critical_reading'>critical reading</option>
<option val='writing'>writing</option>
</select>
$("#topic-select").multiselect({
includeSelectAllOption: true,
selectAllText: 'composite score',
allSelectedText: 'composite score',
selectAllNumber: false,
});
but if I try to populate the options with angular, like this:
<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
</select>
then the dropdown window kindof bugs out, and doesn't show any of the options.
If I remove the javascript turning it into a multiselect, then it DOES show all the options.
I took a look at this similar question:
angularjs-ng-repeat-in-bootstrap-multiselect-dropdown
but couldn't didn't have any luck with it.
you don't really require Bootstrap multi-select if you're going for its functionality. You can get the same functionality in Angular, by populating your options in a dropdown, and adding them to a new list on ng-click.
<span uib-dropdown on-toggle="toggled(open)" auto-close = "outsideClick" >
<a class = "filter-names" href id="simple-dropdown" uib-dropdown-toggle>
My_Dropdown<span ng-repeat="list in generated_list">{{list.genre_name}},</span><b class="caret"></b>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" >
Search: <input type = "text" placeholder = "search in my list" ng-model = "search.name" />
<li ng-repeat="item in list_to_populate | filter:search" ng-class = "{true: 'filter-selected', false: ''}[item.selected == true]" ng-click="addToFilter(item)">
{{item.name}}
</li>
</ul>
</span>
And in the controller:
$scope.addToFilter = function(item) {
if(item.selected == "undefined" || item.selected == false)
{
item.selected = true;
Filters.addToFilters(item);
}
else
{
Filters.removeFromFilters(item);
item.selected = false;
}
}
And finally have a service "Filters" to store this list and call functions to use it anywhere.
You are missing "ng-model".
It is "ng-options" and not "ng-option".
Try this:
<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList">
</select>
Instead of populating the options with angular, I just add them to the div with vanilla javascript like this:
var topicSelect = $("#topic-select");
for (var topicId in topicList) {
topicSelect[0].add(new Option(topicList[topicId], topicId));
}
and everything works now.
Related
Here is my drop down list
<select id="productselect" aria-label="Single Select"
data-bind="ojComponent: {component: 'ojSelect', disabled: false,
value: productValue,optionChange: onChangeProduct,
rootAttributes: {style:'max-width:20em'}}">
<!-- ko foreach: products -->
<option data-bind="value:value, text:label, css:{labelclass:true}">
</option>
<!-- /ko -->
</select>
I would like to apply different colors to each list item by passing dynamic class, but not working. Please help.
Drop-down should be like
<option style = "color : red" data-bind="value:value, text:label">
<option style = "color : blue" data-bind="value:value, text:label">
and so on...
How to achieve this type of drop-down dynamically.
The css binding usually has a logic test so you can decide which classes to apply, but you are passing true, so it's applying the CSS class labelclass to every option.
If you want to show either red or blue using classes, change your HTML markup to:
<option data-bind="value: value, text: label, css: computedLabelClass">
And change your JavaScript view model to add:
this.computedLabelClass = ko.pureComputed(function() {
return <your logic test here> ? "redLabelClass" : "blueLabelClass";
});
css binding is not working for above type of select component.
I had to go with this type and it is working fine as expected.
<ul id="prods" style="display: none" >
<!-- ko foreach: prods -->
<li data-bind="attr: {'oj-data-value': value}, style:
{color:colorString}">
<span data-bind="text: label"></span>
</li>
<!-- /ko -->
</ul>
<select id="prodselect" name="prod_names"
data-bind="ojComponent: {component: 'ojSelect', disabled: true,
renderMode: 'jet',list: 'prods', value: product,
rootAttributes: {style:'max-width:100%'}}">
</select>
Passing required information from back end through 'prod' data structure.
I have created a tabular page in which i need to filter the table with filters using a left side facets boxes of different category but with multi-selection options and i need to use Angularjs for this requirement.
I need to check/uncheck using the clear filter selection .
Any helping library can help to achieve the same or we need to do some logic around the checkboxes to achieve this.
My checkbox code looks like this:
<div class="col-sm-2" style="padding-top: 10px; padding-bottom: 20px;">
<div class="facetBx sltBx" ng-show="tabFilters.length > 0">
<p class="facetBxTitle"><i class="fa fa-filter"></i> Filter Selection
<a class="clrSlt" ng-click="clearAllFilters();">Clear</a>
</p>
<div class="facetBxChld" id="uRslctn">
<ul>
<li ng-repeat="item in tabFilters">
<div class="crop">
<strong title="{{item}}">{{item}}</strong>
</div>
<i class="fa fa-remove rmvThs" style="font-size: 14px;color:#000;float: right;" ng-click="checkItem(item, item,false);"></i>
</li>
</ul>
</div>
</div>
<div class="facetBx" ng-repeat="item in filters">
<p class="facetBxTitle bomtype">{{item.label}}</p>
<div class="facetBxChld" id="bomFacet">
<ul class="multiselect" style="max-height: 140px;overflow-y: auto;">
<li ng-repeat="(k,v) in item.values">
<input type="checkbox" ng-model='isSelected' ng-click='checkItem(item.name, k, isSelected)'>
<span> {{k}} ({{v}})</span>
</li>
<li ng-show="value.length == 0">
No Data Available.
</li>
</ul>
</div>
</div>
</div>
Below website are the reference of the code which i am trying to build:
www.jabong.com
The UI(HTML) is done but i am facing the trouble in the maintaining the checking and un-checking of the checkboxes which are not clearing off.
I believe i need to code something in the ng-model of checkbox to achieve it but i am not able to be successfull so need help on the same.
Sample Plunkur for the same:
enter link description here
Thanks in advance.
Basically you need to keep track of ng-model of checkboxes with some property in your $scope. I did this by modifying your $scope.filters and adding selected property inside it, like below.
var filters = [{
label: 'Brand',
name: 'brand',
values: {
Blackberrys: 503,
Arrow: 175,
ParkAvenue: 358
}
}, {
label: 'Color',
name: 'color',
values: {
Black: 100,
Green: 200,
Red: 300
}
}]
function loadFilters() {
$scope.filters = filters.map(function(filter) {
var filter = angular.copy(filter);
for (var key in filter.values) {
filter.values[key] = {
selected: false,
count: filter.values[key]
}
}
return filter;
})
}
loadFilters();
Then you can call loadFilters() any time you want to clear all filters. Please see POC attached below.
https://plnkr.co/edit/SADPoUpftnJkg1rMuSB9?p=preview
You should try 'ng-change' on checkboxes to trigger a method which changes the values according to checked and unchecked checkboxes.
For Ex.
<input type="checkbox" ng-model='isSelected' ng-click='checkItem(key, k, isSelected)' ng-change="yourMethodHere()">
in JS:
$scope.yourMethodHere = function() {
if (isSelected) {
// filter the values here
} else {
// non filtered values
}
}
By doing this you do not need to even maintain the values of exiting checked/unchecked checkbox.
I have the following form in my AngularJS app:
<li ng-repeat="device in devices track by $index">
<div class="db-handset-image">
<span class="phone-silhouette"></span>
{{ relative image here }}
</div>
<div class="db-device">
<ul class="opts">
<li>
<select name="manufacturer[ [[$index]] ]" ng-model="selectedManufacturer" ng-change="getManufacturerModels(selectedManufacturer)">
<option value="">Manufacturer</option>
<option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option>
</select>
</li>
<li>
<select name="device[ [[$index]] ]" ng-model="selectedModel" ng-change="loadModelImage(selectedModel, $index)">
<option value="">Model</option>
<option ng-repeat="model in manufacturerModels" value="[[model.id]]">[[model.model + ' ' + model.variants[$index].memory + ' ' + model.variants[$index].colour]]</option>
</select>
</li>
</ul>
</div>
</li>
What happens in this form is that a user will select a manufacturer from the first dropdown and a model from the model dropdown. The model dropdown will populate with the relative models after a manufacturer has been selected using Angular's $filter.
When the user has selected a model, loadModelImage is fired and what needs to happen here is that after a model selection, that model image is then loaded into the {{relative image here}} placeholder. This is currently being done like so:
$scope.loadModelImage = function (modelId, $index) {
$http.get(ajaxurl + '?action=get_handset&hid=' + modelId)
.success(function (data) {
$scope.selectedHandsets++;
$scope.modelImages.splice(0, 0, data.handset.images);
})
}
This issue with this is that if I replace the relative image here placeholder text with an <img> loading in the model images, each model that's been selected appears in every row.
My other issue is that if you remain on the same 'row' (see below screenshot) and change the handset image, another array of images is pushed to $scope.modelImages when it in fact the images for that 'row' should effectively be overwritten with the new selection.
To give you a clear understanding of how the form looks, here's a screenshot:
When you click 'add new handset' the row containing the dropdowns is visually duplicated and you can add select another handset.
I hope my problem's explained clearly enough, any Q's ask.
I have been working over an application for over a month now. But I am stuck at a place. The scenario is not that difficult, but I think I am missing something basic.
Scenaro: I am collecting selected values of numerous dropdownlists in an array and passing them to the controller in app.js, that would save the value in the database.
Code for html:
Note: Alert is a custom directive that would generate dropdownlists on click of "Add Projects" button.
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)" ng-model="ProjectId[item.ProjectId]">
<ul style="list-style-type: none; margin-left: 0px;">
<li >
<!--data-ng-model="selectedProject[$index]"-->
<!--data-ng-model="test.ProjectId"-->
<!--<select data-ng-model="test.ProjectId"
data-ng-options="test.ProjectId as test.ProjectName for test in items" id="Project">-->
<select>
<option value="">-- Choose a Project --</option>
<option ng-repeat="item in items" value="{{item.ProjectId}}">{{item.ProjectName}}</option>
</select>
<button type="button" ng-click="closeAlert($index)"><img src="delete.png" alt="Remove" style="height:20px; width:20px;" /></button>
</li>
</ul>
</alert>
<button class='btn' type='button' ng-click="addAlert()">Add Projects</button>
</div>
Code for app.js
var CreateCtrlEmp = function ($scope, $location, SampleEmp, SampleProj, SampleDes, sharedValues) {
$scope.items = SampleProj.query({ q: $scope.query });
$scope.itemsd = SampleDes.query({ q: $scope.query });
$scope.save = function (item) {
//$scope.item.ProjectId = new Array("5","8");
//$scope.ProjectId = new Array();
$scope.item.ProjectId = new Array(item);
alert($scope.item.ProjectId);
SampleEmp.save($scope.item);
$location.path('/emp');
};};
I want to pass on the values in the save function. When I see the values in the firebug panel. I can see that the array contians null values in it.
If I pass static values in the controller then the values are saved in the database.
Please guide.
Thanx a lot in advance.
Tushar Sharma.
I have a hash of objects, and the ID of this hash is binding to a RADIO BUTTON. When the user select this radio, I need to populate a select tag with options based on attribute of this model.
Its hard to explain, so I created a Codepen to show what I want:
http://codepen.io/rizidoro/pen/BeJjf
Thanks in advance!
Here's a codepen demo binding dynamically to a single SELECT element, with a working ng-model binding on selection change:
HTML:
<div ng-controller="TestCtrl">
<ul>
<li ng-repeat="attr in data">
<input type="radio" name='data-attr' value='{{attr.id}}' ng-model="selected.id" />{{attr.name}}
</li>
</ul>
<select ng-model="selected.value" ng-options="item.name for item in selectedAttr.values "></select>
</div>
JS:
function TestCtrl($scope) {
$scope.selected = {};
$scope.data = [
{"id":"113000",
"name":"Size",
"values":
[{"id":"92029","name":"Size A"},
{"id":"92030","name":"Size B"}]
},
{"id":"113002",
"name":"Color",
"values":
[{"id":"94029","name":"Blue"},
{"id":"94030","name":"Black"}]
}
];
$scope.$watch('selected.id', function(id){
delete $scope.selected.value;
angular.forEach($scope.data, function(attr){
if(attr.id === id){
$scope.selectedAttr = attr;
}
});
});
}
I have created a fiddle, that may solve ur problem. http://jsfiddle.net/qY2Zz/.
Seperated the data to a service.
animateAppModule.service('data', function(){...})
Assigned a model to the select box.
ng-model="$scope.selectedOption"
http://jsfiddle.net/wagedomain/afuz5/
I rewrote your HTML a little - not using ul / li tags where a div or span would suffice. Makes it easier.
Basically, inside the ng-repeat, you can do this:
<div ng-repeat="attr in data">
<input type='radio' name='data-attr' value='{{attr.id}}' />{{attr.name}}
<select ng-model="selected" ng-options="item.name for item in attr.values "></select>
</div>
It's the ng-options that makes this work. I also added a $scope.selected variable to model bind to but I'm not doing anything with it in the fiddle. Use as you need.