/ / $ scope. $ apply rendendo strano il menu a discesa - angularjs

$ scope. $ apply che rende dropdown atto strano - angularjs

Ho un menu a discesa;

<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-repeat="category in categories">{{category.name}}</option>
</select>

Che funziona perfettamente. Tuttavia, sto manipolando il campo di applicazione al di fuori di Angular (motivo valido) e lo utilizzo (è in coffeescript ma facile da capire)

scope.$apply (s) ->
s.units = _me.attr("data-units")
s.selected_category = parseInt(_me.attr("data-category"))

s.search(true,true)

esso appare lavorare in tutto ciò che dipende da quello $scope.selected_category la variabile cambia (Viene visualizzato il prodotto / testo corretto) ma il menu a discesa diventa vuoto se ho selezionato Select Category (IE: non modificato da quel cambiamento) e rimane lo stesso se si seleziona qualcos'altro. Osservando il menu a discesa vuoto quando utilizzo la finestra di ispezione degli elementi in Chrome, posso vedere questo:

<option value="? number:31 ?"></option>

Cosa succede con quello?

risposte:

0 per risposta № 1

Sembra che ti manca il ng-selected attributo su option per far sapere ad Angular quale opzione è attualmente selezionata:

<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-selected="selected_category.id == category.id" data-ng-repeat="category in categories">{{category.name}}</option>
</select>

Tuttavia, è preferibile utilizzare ng-options se non devi fare nulla per avanzare. Quindi, ti consiglio (come menziona @TheSharpieOne nei commenti), di cambiare in questo modo:

 <select ng-model="selected_category" ng-options="c.name for c in categories">
<option value="">Select Category</option>
</select>

Se è necessario tenere traccia del id quindi usare a track by clausola:

 <select ng-model="selected_category" ng-options="c.name for c in categories track by c.id">
<option value="">Select Category</option>
</select>