angularjs - event - ng-< change angular
obteniendo el objeto ng seleccionado con ng-change (10)
Dado el siguiente elemento de selección
<select ng-options="size.code as size.name for size in sizes "
ng-model="item.size.code"
ng-change="update(MAGIC_THING)">
</select>
¿Hay alguna forma de que MAGIC_THING sea igual al tamaño seleccionado actualmente, de modo que tenga acceso a size.name y size.code en mi controlador?
size.code afecta a muchas otras partes de la aplicación (urls de imágenes, etc.), pero cuando se actualiza el modelo ng de item.size.code , item.size.name debe actualizarse para el usuario que enfrenta cosas. Supongo que la forma correcta de hacerlo es capturar el evento de cambio y establecer los valores dentro de mi controlador, pero no estoy seguro de qué puedo pasar a la actualización para obtener los valores adecuados.
Si esta es una forma completamente incorrecta de hacerlo, me encantaría saber cómo hacerlo.
Debe usar "seguimiento por" para que los objetos se puedan comparar correctamente. De lo contrario, Angular utilizará la forma js nativa de comparar objetos.
Entonces tu código de ejemplo cambiaría a -
<select ng-options="size.code as size.name
for size in sizes track by size.code"
ng-model="item.size.code"></select>
En lugar de configurar el modelo ng en item.size.code, ¿qué hay de establecerlo en tamaño?
<select ng-options="size as size.name for size in sizes"
ng-model="item" ng-change="update()"></select>
Luego, en su método update() , $scope.item se establecerá en el elemento seleccionado actualmente.
Y sea cual sea el código necesario item.size.code , puede obtener esa propiedad a través de $scope.item.code .
Actualización basada en más información en los comentarios:
Use alguna otra propiedad de $ scope para su modelo ng seleccionado y luego:
<select ng-options="size as size.name for size in sizes"
ng-model="selectedItem" ng-change="update()"></select>
Controlador:
$scope.update = function() {
$scope.item.size.code = $scope.selectedItem.code
// use $scope.selectedItem.code and $scope.selectedItem.name here
// for other stuff ...
}
Esta es la forma más limpia de obtener un valor de una lista de opciones de selección angular (que no sea El Id o el Texto). Suponiendo que tenga una Selección de Producto como esta en su página:
<select ng-model="data.ProductId"
ng-options="product.Id as product.Name for product in productsList"
ng-change="onSelectChange()">
</select>
Luego, en Tu controlador, configura la función de devolución de llamada de la siguiente manera:
$scope.onSelectChange = function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}
Explicación sencilla: como el evento ng-change no reconoce los elementos de opción en la selección, estamos usando el ngModel para filtrar el elemento seleccionado de la lista de opciones cargada en el controlador.
Además, como el evento se activa antes de que ngModel se actualice realmente, es posible que obtengas resultados no deseados, por lo que una mejor manera sería agregar un tiempo de espera:
$scope.onSelectChange = function () {
$timeout(function () {
var filteredData = $scope.productsList.filter(function (response) {
return response.Id === $scope.data.ProductId;
})
console.log(filteredData[0].ProductColor);
}, 100);
};
Esto podría darte algunas ideas.
.NET C # Ver Modelo
public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
.NET C # Web Api Controller
public class DepartmentController : BaseApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
var sms = Ctx.Departments;
var vms = new List<DepartmentViewModel>();
foreach (var sm in sms)
{
var vm = new DepartmentViewModel()
{
Id = sm.Id,
Name = sm.DepartmentName
};
vms.Add(vm);
}
return Request.CreateResponse(HttpStatusCode.OK, vms);
}
}
Controlador Angular:
$http.get(''/api/department'').then(
function (response) {
$scope.departments = response.data;
},
function (response) {
toaster.pop(''error'', "Error", "An unexpected error occurred.");
}
);
$http.get(''/api/getTravelerInformation'', { params: { id: $routeParams.userKey } }).then(
function (response) {
$scope.request = response.data;
$scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
},
function (response) {
toaster.pop(''error'', "Error", "An unexpected error occurred.");
}
);
Plantilla Angular:
<div class="form-group">
<label>Department</label>
<div class="left-inner-addon">
<i class="glyphicon glyphicon-hand-up"></i>
<select ng-model="travelerDepartment"
ng-options="department.Name for department in departments track by department.Id"
ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
class="form-control">
<option value=""></option>
</select>
</div>
</div>
Si la respuesta de Divyesh Rupawala no funciona (pasar el elemento actual como parámetro), entonces vea la función onChanged() en este Plunker. Está usando this :
También puede obtener directamente el valor seleccionado utilizando el siguiente código
<select ng-options=''t.name for t in templates''
ng-change=''selectedTemplate(t.url)''></select>
script.js
$scope.selectedTemplate = function(pTemplate) {
//Your logic
alert(''Template Url is : ''+pTemplate);
}
También puedes intentar esto:
<select ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items" ng-selected="selectedItem == item.Id" value="{{item.Id}}">{{item.Name}}</option>
</select>
El filtro de AngularJS funcionó para mí.
Suponiendo que el code/id sea único , podemos filtrar ese objeto en particular con el filter de AngularJS y trabajar con las propiedades de los objetos seleccionados. Teniendo en cuenta el ejemplo anterior:
<select ng-options="size.code as size.name for size in sizes"
ng-model="item.size.code"
ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>
<!-- OUTSIDE THE SELECT BOX -->
<h1 ng-repeat="size in sizes | filter:search:true"
ng-init="search.code = item.size.code">
{{size.name}}
</h1>
Ahora, hay 3 aspectos importantes para esto :
ng-init="search.code = item.size.code"- al inicializar el elementoh1fuera del cuadro deselect, configure la consulta de filtro en la opción seleccionada .ng-change="update(MAGIC_THING); search.code = item.size.code": cuando cambia la entrada seleccionada, ejecutaremos una línea más que establecerá la consulta de "búsqueda" en elitem.size.codeseleccionado actualmenteitem.size.code.filter:search:true- Pasetruea filter para habilitar la coincidencia estricta .
Eso es. Si size.code es size.code , solo tendremos un elemento h1 con el texto size.name .
He probado esto en mi proyecto y funciona.
Buena suerte
//Javascript
$scope.update = function () {
$scope.myItem;
alert(''Hello'');
}
<!--HTML-->
<div class="form-group">
<select name="name"
id="id"
ng-model="myItem"
ng-options="size as size.name for size in sizes"
class="form-control"
ng-change="update()"
multiple
required>
</select>
</div>
Si desea escribir, nombre, id, clase, múltiple, requerido, puede escribir de esta manera.
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}} </option>
</select>