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>
Related
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.
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>
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
What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.
This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So
The format of the data I need to end up with in the end is a simple array like this:
"school_type": [
"Government/State",
"International",
"Co-educational"
]
This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.
So I can get the fields displaying, but the issues I have are:
The name properties on the radio buttons don't seem to work for
each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.
Any help would be appreciated.
There's a couple of problems with your code:
You're not using interpolation where it is needed;
You're not binding the controls to the scope;
Here's your updated code:
<label ng-switch-when="r" class="radio">
<div ng-repeat="option in options">
<input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
<span>{{ option }}</span>
</div>
</label>
<label ng-switch-when="c" class="checkbox">
<input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
<span>{{ options[0] }}</span>
</label>
Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.
And finally, here's a working version of your Plunker.
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?