javascript - llenar - AngularJs-ng-model en un SELECT
select angular 6 (6)
Problema:
Tengo un elemento SELECT en mi página, que se completa con
ng-repeat
.
También tiene un
ng-model
que tiene un valor predeterminado.
Cuando cambio el valor, el
ng-model
adapta, eso está bien.
Pero la lista desplegable muestra un espacio vacío en el lanzamiento, donde debería tener el elemento con el valor predeterminado seleccionado en su lugar.
Código
<div ng-app ng-controller="myCtrl">
<select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
<option ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
</select>
</div>
Con JS:
function myCtrl ($scope) {
$scope.units = [
{''id'': 10, ''label'': ''test1''},
{''id'': 27, ''label'': ''test2''},
{''id'': 39, ''label'': ''test3''},
]
$scope.data = {
''id'': 1,
''unit'': 27
}
};
Sin embargo, ngOptions proporciona algunos beneficios, como reducir la memoria y aumentar la velocidad al no crear un nuevo alcance para cada instancia repetida. https://docs.angularjs.org/api/ng/directive/ngOptions
La solución alternativa es usar la directiva
ng-init
.
Puede especificar la función que inicializará sus datos predeterminados.
$scope.init = function(){
angular.forEach($scope.units, function(item){
if(item.id === $scope.data.unit){
$scope.data.unit = item;
}
});
}
Ver jsfiddle
El valor predeterminado de Select debe ser uno de sus valores en la lista. Para cargar la selección con el valor predeterminado, puede usar ng-options . Es necesario establecer una variable de alcance en el controlador y esa variable se asigna como ng-model en la etiqueta de selección de HTML.
Ver este plunker para cualquier referencia:
No necesita definir etiquetas de opción, puede hacerlo utilizando la directiva ngOptions: https://docs.angularjs.org/api/ng/directive/ngOptions
<select class="form-control" ng-change="unitChanged()" ng-model="data.unit" ng-options="unit.id as unit.label for unit in units"></select>
Puede usar la directiva ng-selected en los elementos de opción. Toma expresión que si es verdad establecerá la propiedad seleccionada.
En este caso:
<option ng-selected="data.unit == item.id"
ng-repeat="item in units"
ng-value="item.id">{{item.label}}</option>
Manifestación
angular.module("app",[]).controller("myCtrl",function($scope) {
$scope.units = [
{''id'': 10, ''label'': ''test1''},
{''id'': 27, ''label'': ''test2''},
{''id'': 39, ''label'': ''test3''},
]
$scope.data = {
''id'': 1,
''unit'': 27
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
<option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
</select>
</div>
También puede poner el elemento con el valor predeterminado seleccionado de ng-repeat como sigue:
<div ng-app="app" ng-controller="myCtrl">
<select class="form-control" ng-change="unitChanged()" ng-model="data.unit">
<option value="yourDefaultValue">Default one</option>
<option ng-selected="data.unit == item.id" ng-repeat="item in units" ng-value="item.id">{{item.label}}</option>
</select>
</div>
y no olvide el valor atribuido si lo deja en blanco, tendrá el mismo problema.
prueba el siguiente código:
En tu controlador:
function myCtrl ($scope) {
$scope.units = [
{''id'': 10, ''label'': ''test1''},
{''id'': 27, ''label'': ''test2''},
{''id'': 39, ''label'': ''test3''},
];
$scope.data= $scope.units[0]; // Set by default the value "test1"
};
En tu pagina:
<select ng-model="data" ng-options="opt as opt.label for opt in units ">
</select>