仅在事件后加载放大器列表数据

Question

I'm trying to figure out a way to only load the data on my second amp-list only when the first one has any selected value, i also can't find a way to make the second amp-list placeholder shows up.

<div class="row">
    <div class="col-sm-4 position-inherit">
        <div class="form-group tt-dark select-site">
            <amp-state id="states" src="/BuscaEstadosAmpRequest?isLead=true&isTeste=false&isMapa=false"></amp-state>

            <amp-list layout="fixed-height"
                height="40"
                src="/BuscaEstadosAmpRequest?isLead=true&isTeste=false&isMapa=false"
                single-item
                items="."
                noloading
                binding="no">
                <template type="amp-mustache">
                    <select id="stateGeo" on="change:
                            AMP.setState({
                                selectedState: states.items.filter(x => x.ID == event.value)[0]
                            }); cities.refresh">
                        <option value="" [disabled]="selectedState">UF</option>

                        {{#items}}
                        <option value="{{ID}}">{{Sigla}}</option>
                        {{/items}}
                    </select>
                </template>
            </amp-list>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="form-group tt-dark select-site">
            <amp-state id="cities"
                [src]="'/BuscaCidadesAmpRequest?isLead=true&isTeste=false&isMapa=false&estadoId=' + selectedState.ID">
            </amp-state>

            <amp-list layout="fixed-height" height="40" [src]="cities" single-item items="." noloading binding="no">
                <template type="amp-mustache">
                    <select id="cityGeo" on="change:
                            AMP.setState({
                                cityId: event.value
                            })">
                        <option value="">ESCOLHA UMA CIDADE</option>

                        {{#items}}
                        <option value="{{ID}}">{{Nome}}</option>
                        {{/items}}
                    </select>
                </template>
                <div placeholder role="listitem">
                    <select disabled>
                        <option value="">ESCOLHA UMA CIDADE</option>
                    </select>
                </div>
            </amp-list>
        </div>
    </div>

    <div class="form-group tt-dark select-site">
        <amp-state id="units"
            [src]="'/BuscaUnidadesAmpRequest?isLead=true&isTeste=false&isMapa=false&cidadeId=' + selectedCity.ID">
        </amp-state>

        <amp-list layout="fixed-height" height="40" [src]="units" single-item items="." noloading>
            <template type="amp-mustache">
                <select id="unitGeo" on="change:
                        AMP.setState({
                            unitId: event.value
                        })">
                    <option value="">ESCOLHA UMA UNIDADE</option>

                    {{#items}}
                    <option value="{{ID}}">{{NomeFantasia}}</option>
                    {{/items}}
                </select>
            </template>
        </amp-list>
    </div>
</div>

If it's not possible to do what i wanted, what would be the best option on this?

Also how could i disable the first option to prevent the user from ever selecting it?

<option value="" [disabled]="selectedState">UF</option>

EDIT Forgot to mention two things, how would i manually update the amp-state for the cities manually after i selected the state? And how do i manually start a state with a default value? I tried to use the following but always ended-up with a warning that the state is null:

<amp-state id="teste">
    <script type="application/json">
        {
            "ID": 0,
            "Nome": "",
            "Sigla": ""
        }
    </script>
</amp-state>

Answer 1

how do i manually start a state with a default value? I tried to use the following but always ended-up with a warning that the state is null

you can't - there is no initial state in amp-bindings. You have to populate the html element and only use amp-bind when updating the value.

You could go this way:

{{#items}}
<option value="{{ID}}" {{SELECTED}}>{{Nome}}</option>
{{/items}}

and change you're json-object to something like that:

{
  "id" : "1",
  "name" : "Paris",
  "selected" : "selected"
}

should do the job