Items in ng-options not updating to selected language - angularjs

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>

Related

In devExpress, how to add a search box within select-box's dropdown list

I want to add a text-box to the top of the dropdown list that appears when a select-box is clicked.
This way, I can filter and select a value.
Can this be done in devExpress?
I know that the template for each individual value can be modified by using dx-template, but can the dropdown list as a whole be modified (i.e. a text-box be added to the top for filtering)?
<div dx-select-box="vm.account1BoxConfig">
<div data-options="dxTemplate:{ name:'accountItem' }">
<span dx-text-box="{value: 'Mike'}"></span> // not working -- adds text-box to each value
<span>{{::code}}</span>
<small style="margin-left: 5px">[{{::name}}]</small>
</div>
</div>
By the way, I don't want to type text in the select-box element - only in a text-box at the top of the drop-down.
-- I know the select-box element can be used to type filter/search text-.
The only other option I can think of is to create a dx-list and toggle it when the input element is clicked....
I suggest you use dxLookup instead. It provides a search box in the drop-down out-of-the box. See the http://js.devexpress.com/Demos/WidgetsGallery/#demo/actions_and_lists-lookup-overview demo.

How to have a validation between radio buttons which are dynamically created in angularjs?

I am creating a dynamic radio buttons and checkboxes .But when enter their labels how can we have a validation so that no name is repeated again for next controls respectively
<span style="padding-left: 20px" ng-repeat="r in field.rbtn track by $index | unique:'r.radioname'" >
<input type="radio" id="radio_{{$index}}">{{r.radioname}}
</span>
For this I have used like this..but it does not displaying the values only the label is displayed but under it ,no radio button with its name is not displaying
I am sure you are using ng-repeat for dynamically generating checkboxes.
You can use the Angular unique filter for removing duplicates in your ng-repeat.

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>

Angular.js dynamic field generation

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.

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