javascript - llenar - Trabajar con seleccionar usando las opciones ng de AngularJS
ng-select angular 4 (8)
En CoffeeScript:
#directive
app.directive(''select2'', ->
templateUrl: ''partials/select.html''
restrict: ''E''
transclude: 1
replace: 1
scope:
options: ''=''
model: ''=''
link: (scope, el, atr)->
el.bind ''change'', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat=''o in options''
value=''{{$index}}'' ng-bind=''o''></option>
</select>
<!-- HTML usage -->
<select2 options=''mnuOffline'' model=''offlinePage.toggle'' ></select2>
<!-- Conclusion -->
<p>Sometimes it''s much easier to create your own directive...</p>
Lo he leído en otras publicaciones, pero no pude entenderlo.
Tengo una matriz,
$scope.items = [
{ID: ''000001'', Title: ''Chicago''},
{ID: ''000002'', Title: ''New York''},
{ID: ''000003'', Title: ''Washington''},
];
Quiero renderizarlo como:
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
Y también quiero seleccionar la opción con ID = 000002.
He leído select y probar, pero no puedo entenderlo.
Espero que lo siguiente te funcione.
<select class="form-control"
ng-model="selectedOption"
ng-options="option.name + '' ('' + (option.price | currency:''USD$'') + '')'' for option in options">
</select>
Estoy aprendiendo AngularJS y también estaba luchando con la selección. Sé que esta pregunta ya está respondida, pero quería compartir un poco más de código sin embargo.
En mi prueba tengo dos cuadros de lista: marcas de automóviles y modelos de automóviles. La lista de modelos está deshabilitada hasta que se seleccione alguna marca. Si la selección en el cuadro de lista de marcas se restablece más tarde (se establece en ''Seleccionar Marca''), entonces el cuadro de lista de modelos se deshabilita nuevamente Y su selección también se restablece (a ''Seleccionar modelo''). Las marcas se recuperan como un recurso, mientras que los modelos están codificados.
Hace JSON:
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
servicios.js:
angular.module(''makeServices'', [''ngResource'']).
factory(''Make'', function($resource){
return $resource(''makes.json'', {}, {
query: {method:''GET'', isArray:true}
});
});
Archivo HTML:
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
controllers.js:
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
La pregunta ya está respondida (BTW, respuesta realmente buena y completa proporcionada por Ben), pero me gustaría agregar otro elemento para completar, que también puede ser muy útil.
En el ejemplo sugerido por Ben:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Se ha utilizado el siguiente formulario docs.angularjs.org/api/ng/directive/ngOptions : select as label for value in array .
Label es una expresión, cuyo resultado será la etiqueta para el elemento <option> . En ese caso, puede realizar ciertas concatenaciones de cadenas para tener etiquetas de opciones más complejas.
Ejemplos:
-
ng-options="item.ID as item.Title + '' - '' + item.ID for item in items"le da etiquetas comoTitle - ID -
ng-options="item.ID as item.Title + '' ('' + item.Title.length + '')'' for item in items"le da etiquetas comoTitle (X), dondeXes la longitud de la cadena de título.
También puedes usar filtros, por ejemplo,
-
ng-options="item.ID as item.Title + '' ('' + (item.Title | uppercase) + '')'' for item in items"le da etiquetas comoTitle (TITLE), donde el valor de Título de la propiedad Título y TITLE Es el mismo valor pero convertido a caracteres en mayúscula. -
ng-options="item.ID as item.Title + '' ('' + (item.SomeDate | date) + '')'' for item in items"le da etiquetas comoTitle (27 Sep 2015), si su modelo tiene una propiedadSomeDate
Por alguna razón AngularJS me permite confundirme. Su documentación es bastante horrible en esto. Más buenos ejemplos de variaciones serían bienvenidos.
De todos modos, tengo una ligera variación en la respuesta de Ben Lesh.
Mis colecciones de datos se ve así:
items =
[
{ key:"AD",value:"Andorra" }
, { key:"AI",value:"Anguilla" }
, { key:"AO",value:"Angola" }
...etc..
]
Ahora
<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>
todavía resultó en el valor de las opciones para ser el índice (0, 1, 2, etc.).
Añadiendo Track Por lo arreglé para mí:
<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>
Reconozco que es más frecuente que desee agregar una matriz de objetos a una lista de selección, ¡así que recordaré este!
Tenga en cuenta que desde AngularJS 1.4 ya no puede usar ng-options, pero necesita usar ng-repeat en su etiqueta de opción:
<select name="test">
<option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>
Puede ser útil. Los enlaces no siempre funcionan.
<select id="product" class="form-control" name="product" required
ng-model="issue.productId"
ng-change="getProductVersions()"
ng-options="p.id as p.shortName for p in products"></select>
Por ejemplo, rellena el modelo de origen de la lista de opciones desde un servicio REST. Se conocía un valor seleccionado antes de completar la lista, y se estableció. Después de ejecutar la solicitud REST con $ http, la opción de lista está lista.
Pero la opción seleccionada no está configurada. Por razones desconocidas, la ejecución de AngularJS in shadow $ digest no se enlaza como debería. Tengo que usar jQuery para configurar el seleccionado. ¡Es importante! AngularJS, en la sombra, agrega el prefijo al valor del valor "attr" generado por las opciones ng-repeat. Para int es "número:".
$scope.issue.productId = productId;
function activate() {
$http.get(''/product/list'')
.then(function (response) {
$scope.products = response.data;
if (productId) {
console.log("" + $("#product option").length);//for clarity
$timeout(function () {
console.log("" + $("#product option").length);//for clarity
$(''#product'').val(''number:''+productId);
}, 200);
}
});
}
Si necesita un título personalizado para cada opción, ng-options no es aplicable. En su lugar, use ng-repeat con opciones:
<select ng-model="myVariable">
<option ng-repeat="item in items"
value="{{item.ID}}"
title="Custom title: {{item.Title}} [{{item.ID}}]">
{{item.Title}}
</option>
</select>
Una cosa a tener en cuenta es que se requiere ngModel para que ngOptions funcione ... tenga en cuenta que ng-model="blah" dice "set $ scope.blah al valor seleccionado".
Prueba esto:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Aquí hay más información de la documentación de AngularJS (si no la has visto):
para fuentes de datos de matriz:
- etiqueta para el valor en la matriz
- Seleccionar como etiqueta para valor en matriz
- etiqueta grupo por grupo para valor en matriz = seleccione como etiqueta grupo por grupo para valor en matriz
para fuentes de datos de objetos:
- Etiqueta para (clave, valor) en objeto
- Seleccionar como etiqueta para (clave, valor) en objeto
- etiqueta grupo por grupo para (clave, valor) en objeto
- seleccione como etiqueta grupo por grupo para (clave, valor) en objeto
Para algunas aclaraciones sobre los valores de etiqueta de opción en AngularJS:
Cuando utiliza ng-options , los valores de las etiquetas de opción escritas por ng-options siempre serán el índice del elemento de matriz al que se relaciona la etiqueta de opción . Esto se debe a que AngularJS realmente le permite seleccionar objetos completos con controles de selección, y no solo tipos primitivos. Por ejemplo:
app.controller(''MainCtrl'', function($scope) {
$scope.items = [
{ id: 1, name: ''foo'' },
{ id: 2, name: ''bar'' },
{ id: 3, name: ''blah'' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Lo anterior le permitirá seleccionar un objeto completo en $scope.selectedItem directamente. El punto es que, con AngularJS, no necesita preocuparse por lo que está en su etiqueta de opción. Deja que AngularJS maneje eso; solo debes preocuparte por lo que hay en tu modelo en tu alcance.
Aquí hay un plunker que demuestra el comportamiento anterior y muestra el HTML escrito
Tratando con la opción por defecto:
Hay algunas cosas que no he mencionado anteriormente relacionadas con la opción predeterminada.
Seleccionando la primera opción y eliminando la opción vacía:
Puede hacer esto agregando un simple ng-init que establezca el modelo (de ng-model ) al primer elemento en los elementos que repite en ng-options :
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Nota: Esto podría volverse un poco loco si foo se inicializa correctamente a algo "falso". En ese caso, lo más probable es que desees manejar la inicialización de foo en tu controlador.
Personalizando la opción por defecto:
Esto es un poco diferente; aquí todo lo que necesita hacer es agregar una etiqueta de opción como un hijo de su selección, con un atributo de valor vacío, y luego personalizar su texto interno:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Nota: En este caso, la opción "vacía" permanecerá allí incluso después de seleccionar una opción diferente. Este no es el caso del comportamiento predeterminado de las selecciones en AngularJS.
Una opción predeterminada personalizada que se oculta después de realizar una selección:
Si desea que su opción predeterminada personalizada desaparezca después de seleccionar un valor, puede agregar un atributo ng-hide a su opción predeterminada:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>