multiple llenar con change javascript jquery angularjs angular-ngmodel

javascript - llenar - AngularJs-ng-model en un SELECT



select angular 6 (6)

JSfiddle

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:

http://embed.plnkr.co/hQiYqaQXrtpxQ96gcZhq/preview


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>

Violín de trabajo