Angular translate inner content - angularjs

How to make angular translate work with inner content? By default it removes everything inside the element containing the translate directive.
When using the directive translate to translate stuff, the framework removes everything inside the HTML element.
In most cases this is not a problem since, you will want your translation to take all your content.
However in some cases it's annoying, for example with labels, see the following plnkr. The following translation will remove the select element.
<label translate> STATE
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</label>
<label translate="STATE">
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</label>
https://plnkr.co/edit/wcMuDVMhxH3wbSUTUwtY?p=preview
I am aware that I could use the attribute for or label in this case to solve the problem in this particular case, but I'm after a general solution.

The for attribute you mentioned about is a good way to go, in fact it is the correct and semantic way of doing it:
<label for="state" translate>STATE</label>
<select
ng-model="selectedItem"
ng-options="item.name for item in items track by item.id"
id="state"></select>

i think you can try this instead
<label> {{'STATE'|translate}} </label>
<select ng-model="selectedItem" ng-options="item.name |translate for item in items track by item.id"></select>
works like charm on my side
p.s : i cant edit your plunker due to my internet connection issue. but I tested what I ust done like above and it works well on my side as long as the translations json is matched with your options
edit : sorry. i forgot to put close tag of label :'(

Related

ng-repeat in select tag not producing results

Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you

Bootstrap select picker with ng-repeat is not working for JSON object

I was using Bootstrap select for search and multiple select but the problem is when i am using $scope object in ng-repeat for options it's not working . I have given my codes below .
<select name="name" ng-model="city.id" class="selectpicker" data-live-search="true" ng-options="o._id as o.name for o in stateList" ></select>
<select name="name" ng-model="city.id" class="selectpicker" data-live-search="true" ><option ng-repeat="option in stateList" value="{[{option._id}]}">{[{option.name}]}</option>
I have used both options and ng-option methods but still the object didn't show up ...
This is my state object that need to be repeated in select...
$scope.stateList = [{"_id":"1","name":"www"},{"_id":"2","name":"bgg"}]
Hope you understand my problem and if you need any more details
pls leave a comment and i'm waiting for your suggestions...
I was having issues as well, but using nya-bootstrap-select
http://nya.io/nya-bootstrap-select/#!/
fixed it. It has something to do with bootstrap select's use of jQuery which doesn't always play nice with angular...this is written in Angular for use with Angular, so its more compatible...

How to pre-select option from <select> tag in Angular with options from a different controller?

I'm using two controllers here. One, productComponentsController, handles a call to our database that pulls back an array of productComponent objects. The other, AddEditArticleController, controls the 'Create New / Edit Existing Article' page.
On my Add/Edit Article page, I want a <select> to populate with productComponents, and, if I am editing an existing Article, to be pre-selected with that Article's current productComponent.
Simple as this seems, I cannot make the field pre-select with the existing productComponent, though it does populate the <select> with them correctly. I've tried ngRepeat and ngOptions and both work for populating the dropdown, but neither works for pre-selecting the existing productComponentID from the array returned by the server.
My HTML, using ngOptions:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md"
ng-options="component.name for component in pvm.productComponents track by component.id"></select>
My HTML, using ngRepeat:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md">
<option value="{{component.id}}"
ng-repeat="component in pvm.productComponents"
ng-selected="vm.selectOption(component.id)"
ng-bind-html="component.name"></option>
</select>
<!-- vm.selectOption() returns true if the current option's ID equals the productComponentID of the current Article. Therefore this option would be selected. -->
In my AddEditArticleController, I set vm.selectedComponent equal to the productComponentID of the Article that was returned by the database, in the promise.then() of my call. While vm.selectedComponent does change, this doesn't do anything to the dropdown.
Also, in my generated HTML, I get the option: <option value="? number:47 ?"></option> (for an Article where the productComponentID is = 47). Apparently this happens as a result of the model being set to an unknown value but I don't know why the model would be set to anything other than an integer id.
Is this because my select is accessing multiple controllers, or am I missing something obvious here? Any help is greatly appreciated, let me know if more info is needed.
I believe you're looking for ng-init...
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
class="form-control input-md"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
ng-model="vm.selectedComponent"
ng-init="vm.selectedComponent=productComponentID"
ng-options="component as component.name for component in pvm.productComponents track by component.id"></select>
So it turns out that because the model has to be a string, I have to cast the vm.selectedOption to a string whenever it's changed (in this case, in the vm.selectOption function) using String(). This is using ngRepeat. ngInit seems to have no bearing on how my code works.
Boom, that's it, and my code works.

Empty Option field in Select tag - Angular js

I am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";

Angular ng-switch with ng-show not respecting DOM order

I'm coming to Angular from a jQuery / Backbone background so I'm new to Angular. Anyway, so I'm trying to show/hide divs based on select box values. Basic stuff I know.
The problem is that with the code block below even though <div ng-show="designer"> is the last element in the DOM it shows up before both of the switch-when statements. Moving it around makes no difference.
<select ng-model="designer">
<option value="designerYes">Yes</option>
<option value="designerNo">No</option>
</select>
<div ng-switch on="designer">
<div ng-switch-when="designerYes"...>
<div ng-switch-when="designerNo"...>
<div ng-show="designer">
</div>
I suspect the problem is related to when the events switch and show events are fired but I'm not sure how the best way to troubleshoot or fix the problem. Any ideas on a solution?
UPDATE: The solution (for my case at least) was to not mix ng-switch and ng-show. The first answer right. Because the switch statements aren't in the DOM they are appended after the already available ng-show div.
Here's the answer...
<select ng-model="designer">
<option value="designerYes">Yes</option>
<option value="designerNo">No</option>
</select>
<div ng-show="designer == 'designerYes'"...>
<div ng-show="designer == 'designerNo'"...>
<div ng-show="designer">
This will always show the 3rd DIV when a selection is made and conditionally one of the others based on value.
Initially designer will be undefined until you make a selection. So the 1st two won't be rendered I guess. Can you initialize it with one of the values and see if that helps?

Resources