получение ng-объекта, выбранного с помощью ng-change

258

Учитывая следующий элемент 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, чтобы пользователь обратил внимание на вещи, Я предполагаю, что правильный способ сделать это - захватить событие изменения и установить значения внутри моего контроллера, но я не уверен, что я могу передать в обновление, чтобы получить правильные значения.

Если это совершенно неверный путь, я хотел бы знать правильный путь.

Теги:

9 ответов

436
Лучший ответ

Вместо того, чтобы установить 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 ...
}
  • 1
    Если я устанавливаю свою модель как элемент, как мне предварительно выбрать значение?
  • 5
    Поместите это в ваш <select> : ng-init = "item = sizes [0]"
Показать ещё 5 комментариев
57

Вы также можете напрямую получить выбранное значение, используя следующий код

 <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);
}
  • 5
    Это ответ на вопрос, в то время как принятый дает альтернативу
  • 1
    где вы инициализируете или получаете переменную шаблона?
Показать ещё 7 комментариев
11

вы также попробуете это:

<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>
  • 2
    Это решение хорошо, если вам нужно отформатировать значение. Используя только метод выбора, я не мог легко отформатировать значение.
5

Если ответ Divyesh Rupawala не работает (передача текущего элемента в качестве параметра), то, пожалуйста, см. функцию onChanged() в этом Plunker. Он использует this:

http://plnkr.co/edit/B5TDQJ

2

//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>

Если вы хотите написать, имя, id, class, multiple, required, вы можете написать таким образом.

2
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>
  • 11
    Используйте опцию вместо ng-repeat в выборе.
  • 11
    @JepserBernardino иногда требуется более тонкий доступ к <option>, например, для стилизации некоторых специальных / стандартных параметров независимо от того, выбраны они или нет
1

Фильтр 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.

Я тестировал это в своем проекте, и он работает.

Удача

1

Это может дать вам несколько идей

.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>
0

Вам нужно использовать "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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню