Programmatically select multiple listbox items using angularjs - angularjs

I have a multiple list box.
In View,
<select name="cars" multiple class="listMutiple top5">
<option ng-repeat="u in users" value="{{u}}">{{u}}</option>
</select>
In controller,
$scope.users = ["aaaaa","bbbbb","ccccc","ddddd","eeeee","fffff"]
I have a select all checkbox
I need to select all options(same kind of selection happen when i click on any item in the listbox) in the listbox when i click on the select all checkbox. I am not sure how to achieve that.
Anyone please help me.

You can use ng-selected directive:
<option ng-selected="u.selected" ng-repeat="u in users"
value="{{u.name}}">{{u.name}}>
</option>
See the following JSFiddle

Related

ngblur and ngfocus on options list shown / hidden in Angular

When using select and option the ngblur isn't triggered once I click off the list without selecting anything.
I need to know when the options of the select and shown or hidden. Is there a directive that supports this ?
I can use ngblur and ngfocus on the Select element but nothing is ever fired on the options being shown or hidden. Any ideas?
I've run some tests on fiddle.
https://jsfiddle.net/EternalLight/x7dxkok2/
<div ng-app="testTt">
<div ng-controller="Controller" style="padding:2em;">
<select ng-focus="onFocus()" ng-blur="onBlur()">
<option>Test 1</option>
<option>Test 2</option>
</select>
<p>{{status}}</p>
</div>
</div>
It seems that the blur event is fired when you click outside of the element when the option list is hidden. When you open the option list, and then click outside, the <select> is still in focus - you can see it by the blue (or any other, depending on your browser) outline around it. Honestly, I would use ng-blur, since it takes another outside click to trigger it, and there's no way for a user to get around it.

Items in ng-options not updating to selected language

My issue is that the options in my dropdown menus are not changing to the correct language.
For example if I go from English to Chinese everything else will update just fine, but the items in the drop down won't until after I select one of the options in the list, then it will change to the appropriate language. However, all of the other dropdown menus will remain untranslated until they are interacted with like the first one. Is there some way for me to force them to update after I change what language it's being displayed in?
Here's an example of one of the dropdown menus
<label class="col-md-3 col-xs-6">
<span translate="chart"></span>
<select class="form-control" ng-model="report.chart" ng-options="c | translate for c in charts" ng-change="setChartType(report)">
</select>
</label>

ng-model value does not reflect in the select-option

When I try to click edit on a page view, it displays the values as editable. One property, device.exists is a boolean, but when the original value is false and when I click edit, the first option true still displays. How would I make the selection option reflect the original value of the model?
<select ng-model="device.exists">
<option value="true">true</option>
<option value="false">false</option>
</select>
P.S. I didn't use ng-value because it is not available to Hawtio's AngularJS version 1.1.5 which I am using.

NG-show based on select list

I am trying to get items to only show up if something is selected in a select list. I am trying something like this
<input ng-show="myDropDown==''" type="text">
I basically want logic saying if the drop down has anything selected, show this ^. I found that example for specifying the option selected, however I would just like do say if anything is selected show, and if nothing has been selected, hide.
There is a catch, however, these drop downs will be re-generated with $http based on other clicks, and it would be ideal if this was done that the text would hide. Any ideas?
Thanks!
You could do something like this:
<select ng-model="item">
<option ng-repeat="item in items" value ={{item.name}}>
{{item.name}}
</option>
</select>
Then you can just check for item, like so:
<input ng-show="item != null" type="text">
Looks like there is an even easier way to define the select:
<select ng-options="item as item.name for item in items"
ng-model="selectedItem"></select>

Allowing select and input checkboxes to be editable

An HTML template that I'm working on has a variety of HTML select and checkbox elements contained within it.
Eg.
<select>
<option></option>
<option>No</option>
<option>Yes</option>
</select>
<input type="checkbox" />
I've found that these elements do not appear to be editable from within the WYSIWYG editor.
I would like a user to be able to toggle the checkboxes and select options from within these elements from within the WYSIWYG editor.
So the HTML could be turned into something like this:
<select>
<option></option>
<option selected>No</option>
<option>Yes</option>
</select>
<input type="checkbox" checked />
Has anyone been able to acheive this in TinyMCE 4?
Is there a plugin that may help that I haven't found? Are there techincal challenges to achieving this as a plugin?
Thanks for any help/advice!
Update:
I've discovered the inability to change these element within the editor is actually a reported bug with Firefox since 2008! In other browsers you are able to change the values of these elements - however as no changes are made to the HTML - their state is not saved.
Perhaps a plugin to record the state of these elements into the HTML source just prior to saving, would fulfil my requirement?

Resources