Skip to content

Text on the Dropdown-Button isn't updating #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MrWook opened this issue Jul 5, 2016 · 4 comments
Closed

Text on the Dropdown-Button isn't updating #137

MrWook opened this issue Jul 5, 2016 · 4 comments

Comments

@MrWook
Copy link
Contributor

MrWook commented Jul 5, 2016

<ol class="nya-bs-select" ng-model="model.items" >
     <li nya-bs-option="option in selected.item"  deep-watch="true">
        <a>
             {{option.name | translate}}
        </a>
     </li>
</ol>

As you can see I'm using a filter called "translate" on the labels in the dropdown and the label on the button. The filter translate a marker into the right translation for example, "ITEM_PAPER" into "Paper", when the language is set to english.
When I'm loading the page everything works fine but when I'm change the language for the site, only the items in the dropdown change not the button label.
And as you can see i tried it with "deep-watch=true" but this doesnt work neither.

My object looks something like that:
$scope. selected.item = [ { "value": "1", "name": "ITEM_PAPER" }, { "value": "2", "name": "ITEM_CLOCK" }, { "value": "3", "name": "ITEM_PEN" } ]

The model looks like this:
$scope.model.language = 1;

My Global config looks like this:
$scope.translate_config={ maxItems: 1, valueField: 'value', labelField: 'name', searchField: ['name'] };

For my regret i can't provide you with a working plunker or fiddle because the whole application with the translation thing is just to big and time consuming to bring it into a plunker or fiddle.

@lordfriend
Copy link
Owner

This is a design flaw for this particular case. As text in button is the compile result of the dropdown item, no expression will be actually added to the button. so when you model model.items doesn't change, the button doesn't update

@MrWook
Copy link
Contributor Author

MrWook commented Jul 5, 2016

Thank you for the fast replay.

Is there a way to rerender the dropdown or to force the update?

@lordfriend
Copy link
Owner

lordfriend commented Jul 6, 2016

Here is a way to make the button update when you change the translate service. It may looks clunky, but should works

Your case is using translate filter to update the options' text in template, this way the collection (selected.item) doen't change so nyaBsSelect directive don't know the change what you make.
But if you use the translate filter in your code to actually change the collection. and using deep-watch="true", then nyaBsSelect directive will know the change what you make and update the button text.

It may looks like this

// In your controller, assume that you are using the angular-translate
var changeLanguage = function() {
    $scope.selected.item.forEach(function(value,key) {
        value.name = $filter('translate')(value.name);
    });
}

@MrWook
Copy link
Contributor Author

MrWook commented Jul 6, 2016

Thank your for your tip, but unfortunately this would destroy the marker for the translation, so i can only use this function once. I solve the problem by using a third attribute called "translation" like:

[ { "value": "1", "name": "ITEM_PAPER", "translation": "Paper" }, { "value": "2", "name": "ITEM_CLOCK", "translation": "Clock" }, { "value": "3", "name": "ITEM_PEN", "translation": "Pen" } ]

And with this Object i use the Function like:

var changeLanguage = function() { $scope.selected.item.forEach(function(value,key) { value.translation= $filter('translate')(value.name); }); }

This fixed my problem.
I appreciate your plugin it's awsome :)

@MrWook MrWook closed this as completed Jul 6, 2016
@lordfriend lordfriend mentioned this issue Jul 20, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants