Develop Reference

JS Tree Selecting un selected items

I am using JsTree checkbox which contains lot of sub fields.
When I am selecting one field it automatically selects the sub category of another field.
So that field shows partially checked.
For instance:
In my JsTree When I clicked "United States" it partially selects
"Canada".
Please any one explains this behavior.
Since the tree is big I am not pasting the code instead of that I am posting an JsFiddle URL.
Code:
$(function () {
$("#tree").jstree({
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox"],
'core': {
'data': {
"id": "ALL",
"text": "ALL",
"children": [] ...
JSFiddle : http://jsfiddle.net/1r70vjmx/
Thanks in Advance.

Short answer: Duplicate ID's
Long answer: The jsfiddle example shows some nodes having a duplicate ID. jsTree requires that you have unique ID's for all nodes throughout your tree data. In your data, Ontario city in the United States and the Ontario province in Canada have the same id 'Ontario'. If in this case you apply a prefix of 'us-' to all the id's for United States you will see that the problem disappears.

Angular: Allow selection from only one group in drop-down list bootstrap-select

I am using bootstrap-select for drop-down selection with angular. What I want to actually do is to allow selection only from one group(suppose a user selects CS1607 from group Ground, the then selection from the other groups should be disabled and only selection from Ground is allowed then).
$scope.course = [{
id: "Ground",
code: ['CS1607','SD90','EE11','PO213']
}, {
id: "First",
code: ['PH006','EE2131','Aq122']
}, {
id: "Second",
code: ['CSB-9','AA22']
}];
I know, I have to use angular watchers for the changes. I tried a lot but could not get the desired result. Here is my version of code.
Any help would be appreciated.

I would link each select to a model (ng-model) and disable each select whenever the models of the other two are not null. Something like (for select_1):
...ng-if="!select_2_Value && !select_3_Value"...

ng-model with association on select box with ng-repeat on options

I have a Plunker here illustrating my issue. I have an object with an associated division. There is no division_id on the object, but in order to set or update the division I need to set the division_id field. Here's the sample object:
$scope.user = {
name: "John",
age: 32,
division: {
id: 3,
name: "Alpha"
}
};
And the example divisions:
$scope.divisions = [
{
name: "Gamma",
id: 1
},
{
name: "Alpha",
id: 3
},
{
name: "Beta",
id: 5
}
];
The way I'm building the select box is with ng-repeat, which I was hoping would bypass the need to track ng-model for the selected value.
<div class="form-group">
<label for="">Division</label>
<select type="text" ng-model="user.division_id">
<option ng-repeat="division in divisions"
ng-selected="user.division.id == division.id">{{ division.name }}</option>
</select>
</div>
As you can see in the demo, the selected attribute is being placed on the right option, but still the select box display is blank. Even if I add division_id: 3 to the object, it continues to be blank. How can I get this to work without having to do a conversion on the object when loading and updating?
Edit: To address this question being flagged as a duplicate, I think this is unique because I'm asking how to build the select box with ng-repeat, not ng-options. Though the answer is similar to the answer for the proposed duplicate, I think other people might get stuck on this method and find it helpful to see the answer requires a different technique.

If you update your select as follows it will display by default to the users division.id.
<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id">
You seemed to be wanting to have a separate model division_id, the only reason I can think of for this is that you wanted to control the persistence of the user model when the selection is updated. If for some reason you want to intercept the end-users selection to the user model (or even just the in-memory user object) being updated then use a copy/there are many ways to do that, but it's not clear if that's what you're asking.
Updated plunkr
Note it would have worked to have kept the same option ng-repeat syntax, but this is the recommended angular way to deal with options.

As per your plunker, you need to remove the ng-model directive from the select tag for it to work.
if you need to set a division_id variable for your code, you can use ng-init.
<div class="form-group">
<label for="">Division</label>
<select type="text">
<option ng-repeat="division in divisions"
ng-selected="user.division.id == division.id"
ng-init="division_id=division.name">{{ division.name }}
</option>
</select>
</div>

Select box angular using ng-repeat or ng-options and removing blank option

I have found lots of answers on here, but very frustatingly I am unable to execute it. Firstly to explain what I have done:
I have created an array with a list of country objects. In the html I am looping through the countries array and adding each value to a select box.
I just wish to show both the UK and the US, however with my code there is also a third option (an empty option).
How can I just have the 2 values in the array? This answer should work, but it is not showing the correct values in the html. Perhaps it is because I have been using ng-repeat, but perhaps I should be using ng-options as this answer would suggest?
Please see my code below.
CONTROLLER
this.countries = [
{name: "United Kingdom"},
{name: "United States of America"}
];
HTML
<select ng-model="ctrl.country">
<option ng-repeat="country in ctrl.countries" value="{{country.name}}">{{country.name}}</option>
</select>

To remove empty option you need to assign country for ng-model="ctrl.country" value from controller when load this page to show default selected value.
like:
this.countries = [
{name: "United Kingdom"},
{name: "United States of America"}
];
this.country = this.countries[0].name; // initially show "United Kingdom"
or need to create an another option with empty value to show as selected
<select ng-model="ctrl.country">
<option value="">select one</option>// default to show
<option ng-repeat="country in ctrl.countries" value="{{country.name}}">{{country.name}}</option>
</select>

ngOptions selected all options by default and disappearing options on select

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.