javascript - multiple - option ng repeat select when value
Initializing select con AngularJS y ng-repeat (6)
Como se sugiere, debe usar ng-options y, lamentablemente, creo que necesita hacer referencia al elemento de matriz para un valor predeterminado (a menos que el conjunto sea una matriz de cadenas).
El JavaScript:
function AppCtrl($scope) {
$scope.operators = [
{value: ''eq'', displayName: ''equals''},
{value: ''neq'', displayName: ''not equal''}
]
$scope.filterCondition={
operator: $scope.operators[0]
}
}
El HTML:
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>
Estoy tratando de obtener select-box para comenzar con una opción precargada usando ng-repeat con AngularJS 1.1.5. En cambio, la selección siempre comienza sin nada seleccionado. También tiene una opción vacía, que no quiero. Creo que hay un efecto secundario de que no se seleccione nada.
Puedo hacer que esto funcione usando ng-options en lugar de ng-repeat, pero quiero usar ng-repeat para este caso. Aunque mi ejemplo reducido no lo muestra, también quiero establecer el atributo de título de cada opción, y no hay manera de hacerlo utilizando opciones ng, hasta donde yo sé.
No creo que esto esté relacionado con el problema común de alcance AngularJs / herencia prototípica. Al menos no veo nada obvio al inspeccionar en Batarang. Además, cuando elige una opción en la selección con la interfaz de usuario, el modelo se actualiza correctamente.
Aquí está el HTML:
<body ng-app ng-controller="AppCtrl">
<div>
Operator is: {{filterCondition.operator}}
</div>
<select ng-model="filterCondition.operator">
<option
ng-repeat="operator in operators"
value="{{operator.value}}"
>
{{operator.displayName}}
</option>
</select>
</body>
Y el JavaScript:
function AppCtrl($scope) {
$scope.filterCondition={
operator: ''eq''
}
$scope.operators = [
{value: ''eq'', displayName: ''equals''},
{value: ''neq'', displayName: ''not equal''}
]
}
JS Fiddle para esto: http://jsfiddle.net/coverbeck/FxM3B/2/
DE ACUERDO. Si no desea utilizar las ng-options way correctas, puede agregar el atributo ng-selected con una lógica de verificación de condición para la directiva de option para hacer que la preselección funcione.
<select ng-model="filterCondition.operator">
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
{{operator.displayName}}
</option>
</select>
El hecho de que angular esté inyectando un elemento de opción vacío a la selección es que el objeto modelo vinculado a él por defecto viene con un valor vacío cuando se inicializa.
Si desea seleccionar una opción predeterminada, entonces probablemente pueda configurarla en el alcance en el controlador
$scope.filterCondition.operator = "your value here";
Si quieres un marcador de posición de opción vacío, esto funciona para mí
<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
<option value="">Choose Operator</option>
</select>
Gracias a TheSharpieOne por señalar la opción ng-selected. Si eso hubiera sido publicado como una respuesta en lugar de un comentario, habría hecho esa la respuesta correcta.
Aquí hay un JSFiddle en funcionamiento: http://jsfiddle.net/coverbeck/FxM3B/5/ .
También actualicé el violín para usar el atributo de título, que había omitido en mi publicación original, ya que no era la causa del problema (pero es la razón por la que quiero usar ng-repeat en lugar de ng-options) .
HTML:
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
<option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>
JS:
function AppCtrl($scope) {
$scope.filterCondition={
operator: ''eq''
}
$scope.operators = [
{value: ''eq'', displayName: ''equals'', title: ''The equals operator does blah, blah''},
{value: ''neq'', displayName: ''not equal'', title: ''The not equals operator does yada yada''}
]
}
Para la etiqueta de selección, angular proporciona la directiva ng-options. Le brinda el marco específico para configurar opciones y establecer un valor predeterminado. Aquí está el violín actualizado que usa ng-options que funciona como se esperaba: http://jsfiddle.net/FxM3B/4/
HTML actualizado (el código permanece igual)
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
Si usa md-select y ng-repeat ing md-option del material angular, puede agregar ng-model-options="{trackBy: ''$value.id''}" a la etiqueta md-select ash que se muestra en este bolígrafo
Código:
<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: ''$value.id''}">
<md-select-label>{{ user ? user.name : ''Assign to user'' }}</md-select-label>
<md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>