Update label when options are changing

[bjarnef]

I have a dropdown with options, where the options are depending on another dropdown.
When I select a value from a dropdown with transport options it get some different travel length, where part of the label is night (nætter) if the transport method is self-drive (kør-selv) otherwise days (dage).

But when changing to another transport option with the same values it doesn't update the label although the options are correct, but it does update the labels if the values are different.

I had the same issue with a regular select and angular bindings if the bindings were oneway, but if the bindings were twoway it did work. So I am wondering if this is using oneway binding on this?

Is there another way to ensure the label is updated?

In the last example the option 8 dage is selected, but the filter option label doesn't match this.

[lordfriend]

It should update your selected labels but depends on how you use this directive. This directive clones your custom content beneath into the drop-down button. and try to compile the template ( if your using a nya-bs-option directive to generate option).

[bjarnef]

I first tried without title-tpl attribute, but it then had an empty value and didn't seems to fallback to config settings, when the search cookie (an object) was empty.

var app = angular.module("myApp");

app.requires.push('nya.bootstrap.select');

app.config(['nyaBsConfigProvider', function (nyaBsConfigProvider) {
    nyaBsConfigProvider.setLocalizedText('da-dk', {
        defaultNoneSelection: 'Vælg...',
        noSearchResult: 'Intet resultat',
        numberItemSelected: '%d element(er) valgt',
        selectAll: 'Vælg alle',
        deselectAll: 'Fravælg alle'
    });
    nyaBsConfigProvider.useLocale('da-dk');
}]);

<ul class="nya-bs-select show-menu-arrow ng-cloak" data-ng-model="search.dage" data-size="15" deep-watch="true" data-ng-change="updateCustomDropdownDays(search)" title-tpl="<span>{{getTravelDaysLabel(dageObj, search.dage, search.transport, '@Umbraco.GetDictionaryValue("Days")', '@Umbraco.GetDictionaryValue("nights")')}}</span>">
     <li nya-bs-option="dage in dageObj" data-value="dage">
          <a>{{((search.transport != 'DKK' ? addADay(dage) : dage) + ' ' + (search.transport != 'DKK' ? '@Umbraco.GetDictionaryValue("Days")' : '@Umbraco.GetDictionaryValue("nights")'))}}</a>
     </li>
</ul>

To solve this I use the title-tpl:

$scope.getTravelDaysLabel = function (arr, days, transport, daysLabel, nightsLabel) {
        var name = "Vælg...";
        angular.forEach(arr, function (value, key) {
            if (value === days) {
                var firstPart = (transport != 'DKK' ? $scope.addADay(days) : days);
                var secondPart = (transport != 'DKK' ? daysLabel : nightsLabel);
                name = firstPart + ' ' + secondPart;
            }
        });
        return name;
    };

Although all of the parameters in the function getTravelDaysLabel return the correct values based on transport code is DKK or not, it doesn't update the special title label, when the actual values are not changed (only the option values are updated).

So e.g. with values like 3, 4, 5 and transport code DKK, then the options would be:
"3 nætter (nights)", "4 nætter (nights)", "5 nætter (nights)", but for other transport codes, it would use the same values, but the labels have +1 in the number: "4 dage (days)", "5 dage (days)", "6 dage (days)".

So the options are updated correct, but not the label/title.

Does it somewhere has a oneway binding on the filter option label?

[lordfriend]

maybe angular 1.x cannot execute functions in evaluate brackets twice? when in oneway binding, it means it can only observe an expression value changes...
An advice is to simplify your option expression like using a temporary variable.