I'm having a strange issue I can't seem to troubleshoot with my view. I'm using a directive that generates a treeview of my website. When I select one site, I have two select boxes which populate with the groups in one site and the lists in the site. When the options populate, they are all selected. I've inspected elements and they all have option="selected" Stranger is that, when I click on a single option, all others disappear and only the selected option remains. I've checked the source in Chrome console and yea only the selected option tag remains.
For exmaple the Site Lists select box has multiple options but when I clicked on Old documents, they others all disappeared. In the Site Groups, all groups are already selected
Ctrl:
spApp.controller('sitesCtrl',
function sitesCtrl($scope, $q, $modal, UserService, GroupService, SiteService){
//Options for tree controller directive
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
//Returns siteMap for tree controller directive
$scope.siteMap = SiteService.getSiteMap();
//Returns selected sites information: grous, lists, title, url
$scope.showSelected = function(site){
var siteData = SiteService.getSiteInfo(site);
//sets sites title and url in view
$scope.site = site;
$scope.siteGroups = siteData.groups;
$scope.siteLists = siteData.lists;
}
}
);
View:
<div class="siteGroups">
<label for="siteGroups">Site Groups</label>
<select
multiple
name="siteGroups"
id="siteGroups"
class="siteGroups"
ng-model="siteGroups"
ng-options="g.name for g in siteGroups">
</select>
</div>
<div class="btm1 animated fadeInUp">
<label for="siteLists">Site Lists </label>
<select multiple
id="siteLists"
ng-model="siteLists"
ng-options="l.title for l in siteLists">
</select>
</div>
Service and more of the view
This is happening because the ngOptions in the select lists are bounded to the same array as the ngModel. ngModel needs to be a different array that holds only the selected values.
With siteGroups as an example, what is happening is that the select list options are initialized with siteGroups, and they are all selected because the items are in the ngModel (also the siteGroups array). When you click on one of them, it now removes all other items from ngModel except the one you clicked on. Since ngOptions is bounded to the same list, all the non selected options disappear too.
To fix this, create separate array properties on your scope for the selected values in each list.
Related
Is it possible to have two multiple select fields, and the second select options will be filled based upon what is selected in the first select?
Explanation:
Each category has many descriptions related to them.
The main select menu is called "categories", and the options are static, they don't change.
The second select menu is called "descriptions".
I can select as many categories as I want. If I select one category, the second select menu will have all descriptions related to that category as the options. When I select another category in the category select field, the descriptions related to that category will be added to the second select menu, and so on. Same goes for deselecting. I want it to be reactive.
I have found these:
https://github.com/sagalbot/vue-select
https://github.com/monterail/vue-multiselect
But I haven't been able to find a solution to do this with two multiple selects yet. Any pointers?
PS. There are not too many categories and descriptions, so I can load them all into the view so vue can play around with them. I don't need an ajax call.
You need to populate the second select dynamically and update its data source based on events coming from the first one.
Here's a small sketch, I hope it helps.
<template>
<div class="root">
<!-- initial select (options hardcoded) -->
<select v-on:change="populate($event)" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select>
<!-- options variable is reactive -->
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
</div>
</template>
<script>
export default {
name: 'Selects',
data () {
return {
options: []
}
},
methods: {
populate (event) {
const options = []
// iterate over the selected options
// event.target.selectedOptions is a HTMLCollection
Array.from(event.target.selectedOptions).forEach(item => {
// or whatever logic you need
options.push({
value: item.value,
text: `You have selected ${item.text}`
})
})
// update the options attribute to trigger re-rendering
this.options = options
}
}
}
</script>
Later EDIT
jsfiddle here -> https://jsfiddle.net/bpgp11da/
My html :
<select ng-controller="category" ng-model="selectedTestAccount" ng-options="c.category for c in categories track by c.categoryID" ></select>
<select ng-controller="subcatgory" ng-model="selectedTestAccount1" ng-options="c.subcategory for c in subcategories track by c.subcategoryID"></select>
My json will look like:
json1:
category: "Restaurants"categoryID: "1"
json2:
category: "Restaurants"categoryID: "1"subcategory: "European"subcategoryID: "1"
category: "Restaurants"categoryID: "1"subcategory: "Food Carts"subcategoryID: "17"
i want two dropdowns to be created. One for first json which will display categories.
on selecting the first category i want subcategories to be listed from second json. How to make first dropdown as mandatory.
Can anyone helpme with this
So I have created you a plnker
The key is the $watch which looks at the selected value (ng-model) of the first list then changes the values for the second list based on that new value.
$scope.$watch('selectedCategory', function(newValue) {
for (var i = 0; i < $scope.subCategories.length; i++){
if ($scope.subCategories[i].name === newValue){
$scope.selectedSubCategoryValues = $scope.subCategories[i].values;
}
}
});
You just need to:
add the required attribute on the first select
put an empty <option></option> inside the select (otherwise the select has already a default option which satisfy the requirement)
Here's the example:
http://jsfiddle.net/n5568q6o/1/
You can use a watch to watch the first object. If that changes change the array for the second one.
This will change the options according to the options you want for that.
I want to bind a list of selected elements from the UI to my ViewModel. Here is the HTML:
#Html.Label("Actors")
<select name="actors" class="chosen-select" multiple=""
data-placeholder="Select actors of the Screen">
#for(int i = 0; i < actors.Count; i ++)
{
<option value="#i">#actors[i].name</option>
}
</select
Btw, I am using chosen.js, so after this point, in the user interface I'll get the entire list of actors. The client must select one or more than one.
How do I put all of the selected items into a List and send the result to the server?
I saw the demo of chosen.js plugin, it is create a new DIV element instead of SELECT element, so it can't sync selected status back to the SELECT element.
but u can create a CHANGE event to watch selected status.
ref. http://harvesthq.github.io/chosen/#change-update-events
e.g. when a option selected, put value to a hidden text use commas to separate, and at the server side to process.
I'm using AngularJS with AngularStrap (directive Select, based on Bootstrap-Select made by Silvio Moreto). I have the next problem:
I have an array of car brands. Using ng-options, I put them like options in a select.
By other way, when I select an option (car brand), I get the different models of this car brand, and show them like options in another select.
The problem is when I'm using the AngularStrap directive select, it doesn't work well. The first time i select a car brand, it works fine, but the next selected option (car brand), it shows the models of the car brand selected and the first model of the previous car brand selected.
When I don't use AngularStrap select it works well, therefore i think the problem is in AngularStrap select.
Thanks for your help.
My code is the next:
HTML:
<select ng-model="selectBrand" ng-options="carBrand.id as boatBrand.name for boatBrand in boatBrands" bs-select >
<optionvalue="">CarBrand</option>
</select>
<select ng-model="selectModel" ng-options="carModel.id as carModel.name for boatModel in carModels" bs-select>
<option value="">CarModel</option>
</select>
Controller (JS):
$scope.carBrands = carBrand.query();
$scope.$watch('selectBrand', function() {
$scope.carModels = carModel.query({type_id: $scope.selectBrand});
};
I realize this is old, but I had a similar problem with the Chosen Select plugin and a dynamic list of ng-options. I finally resolved the problem by wrapping my options query inside of a $timeout.
$timeout(function () {
$scope.carModels = carModel.query({type_id: $scope.selectBrand});
});
The only way I was able to use the AngularStrap select support with a select element was to use ng-options and have no option elements as children of the <select>.
I am trying to do it in proper way with less pain, but i can't figure out how to deal with ng-model and binding it to the selected list etc and moreover i need to populate that list in later time and keep selected objects in it.
categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ]
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" value="{{category.id}}" ng-model="??" ng-click="??" name="group" id="{{category.id}}" />
{{category.name}}
</label>
</span>
I have to override the categories each time the list is populated since it will be pulled out from a server.
So I guess I need to have arrays and the second one will hold the selected objects?
If I am right, how do I preselect checkboxes?
Do I need ng-click in order call custom function to store the selected object in the other array?
Do I need ng-model in checkbox And what for?
What is the proper-way with less pain?
I have to override the categories each time the list is populated
since it will be pull out form server. So i quess i need to have
arrays and the second one will hold the selected objects?
Yes, since it is a list you can/should use arrays. The information about the selected items/objects should be stored on your scope model (example below).
If I am right, how do I preselected checkboxes?
Save the ID's of the selected options/checkboxes on your model and let the ng-model do the rest.
Do I need ng-click in order call custom function to store the selected
object in the other array?
No, you don't need it, ng-model is enough.
Do i need ng-model in check box? And what for?
Yes, you need it. The ng-model is responsible for storing the selected options on your model and for making the ('pre-')selection automatic.
jsfiddle http://jsfiddle.net/bmleite/PQvQ2/