Получение ng-объекта, выбранного с помощью ng-change
Учитывая следующий элемент select
<select ng-options="size.code as size.name for size in sizes "
ng-model="item.size.code"
ng-change="update(MAGIC_THING)">
</select>
Есть ли способ, чтобы MAGIC_THING был равен текущему выбранному размеру, поэтому у меня есть доступ к size.name
и size.code
в моем контроллере?
size.code влияет на многие другие части приложения (URL-адреса изображений и т.д.), но когда обновлена ng-модель item.size.code
, необходимо также обновить item.size.name
, чтобы пользователь обратил внимание на вещи, Я предполагаю, что правильный способ сделать это - захватить событие изменения и установить значения внутри моего контроллера, но я не уверен, что я могу передать в обновление, чтобы получить правильные значения.
Если это совершенно неверный путь, я хотел бы знать правильный путь.
Ответы
Ответ 1
Вместо того, чтобы установить ng-model в item.size.code, как установить его размер:
<select ng-options="size as size.name for size in sizes"
ng-model="item" ng-change="update()"></select>
Затем в вашем методе update()
$scope.item
будет выбран текущий элемент.
И любой необходимый код item.size.code
, может получить это свойство через $scope.item.code
.
Fiddle.
Обновить на основе дополнительной информации в комментариях:
Используйте другое свойство $scope для выбранной ng-модели:
<select ng-options="size as size.name for size in sizes"
ng-model="selectedItem" ng-change="update()"></select>
Контроллер:
$scope.update = function() {
$scope.item.size.code = $scope.selectedItem.code
// use $scope.selectedItem.code and $scope.selectedItem.name here
// for other stuff ...
}
Ответ 2
Вы также можете напрямую получить выбранное значение, используя следующий код
<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);
}
Ответ 3
вы также попробуете это:
<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>
Ответ 4
Если ответ Divyesh Rupawala не работает (передача текущего элемента в качестве параметра), то, пожалуйста, см. функцию onChanged()
в этом Plunker. Он использует this
:
http://plnkr.co/edit/B5TDQJ
Ответ 5
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}} </option>
</select>
Ответ 6
//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>
Ответ 7
Это может дать вам несколько идей
.NET С# View Model
public class DepartmentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
}
.NET С# 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);
}
}
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.");
}
);
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>
Ответ 8
Фильтр AngularJS работал у меня.
Предполагая, что code/id
уникален, мы можем отфильтровать этот конкретный объект с помощью AngularJS filter
и работать с выбранными объектами. Учитывая вышеприведенный пример:
<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>
Теперь 3 важных аспекта для этого:
-
ng-init="search.code = item.size.code"
- при инициализации элемента h1
вне поля select
установите запрос фильтра к выбранному параметру.
-
ng-change="update(MAGIC_THING); search.code = item.size.code"
- при изменении ввода select мы запустим еще одну строку, которая установит запрос поиска к выбранному в данный момент item.size.code
.
-
filter:search:true
- передать true
для фильтрации, чтобы включить строгое сопоставление.
Что это. Если size.code
is uniqueID, у нас будет только один элемент h1
с текстом size.name
.
Я тестировал это в своем проекте, и он работает.
Удача
Ответ 9
Вам нужно использовать "track by", чтобы можно было правильно сравнивать объекты. В противном случае Angular будет использовать собственный способ сравнения объектов js.
Таким образом, ваш примерный код изменится на -
<select ng-options="size.code as size.name
for size in sizes track by size.code"
ng-model="item.size.code"></select>