отримання об'єкта ng, обраного за допомогою ng-change

З огляду на наступний елемент вибору

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

Якщо це абсолютно неправильний шлях для цього, я хотів би знати правильний шлях.

Замість того, щоб встановити ng-модель для 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.

Скрипка .

Оновлення на основі додаткової інформації в коментарях:

Скористайтеся деяким іншим властивістю $ range для обраної вами 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 ...
}

Ви також можете отримати вибране значення безпосередньо за допомогою наступного коду

 <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);
}

Ви також можете спробувати це:

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

Якщо відповідь Дівіеша Рупавала не працює (передаючи поточний елемент як параметр), то, будь ласка, дивіться onChanged()функцію в цьому Plunker. Він використовує this:

http://plnkr.co/edit/B5TDQJ

<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>

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

Якщо ви хочете написати, ім'я, ідентифікатор, клас, кратний, потрібний, ви можете написати таким чином.

Це може дати вам кілька ідей

.NET C # Переглянути модель

public class DepartmentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

.NET C # Веб-контролер Api

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);
    }

}

Кутовий контролер:

$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.");
    }
);

Кутовий шаблон:

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

Вам потрібно скористатися "доріжкою", щоб об'єкти можна було правильно порівняти. Інакше Angular використовуватиме власний js спосіб порівняння об'єктів.

Отже ваш прикладний код зміниться на -

    <select ng-options="size.code as size.name
 for size in sizes track by size.code" 
ng-model="item.size.code"></select>

AngularJS's Filter розробив для мене.

Припускаючи , що 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>

Тепер у цьому є три важливі аспекти :

1. ng-init="search.code = item.size.code"- на ініціалізаційному h1елементі поза selectполем встановіть запит фільтра на обраний параметр .

2. ng-change="update(MAGIC_THING); search.code = item.size.code"- при зміні введення вибору ми запустимо ще один рядок, який встановить запит "пошук" на вибраний на даний момент item.size.code.

3. filter:search:true- trueПерейти до фільтра, щоб увімкнути суворе узгодження .

Це воно. Якщо size.codeце UniqueID , ми будемо мати тільки один h1елемент з текстом size.name.

Я перевірив це у своєму проекті, і він працює.

Щасти

Це найчистіший спосіб отримати значення зі списку параметрів кутового вибору (крім The Id або Text). Якщо припустити, що на вашій сторінці виберіть продукт на зразок цього:

<select ng-model="data.ProductId"
        ng-options="product.Id as product.Name for product in productsList"
        ng-change="onSelectChange()">
</select>

Потім у своєму контролері встановіть функцію зворотного дзвінка так:

    $scope.onSelectChange = function () {
        var filteredData = $scope.productsList.filter(function (response) {
            return response.Id === $scope.data.ProductId;
        })
        console.log(filteredData[0].ProductColor);
    }

Просто пояснено: оскільки подія зміни ng не розпізнає елементи опції у виділенні, ми використовуємо ngModel для фільтрації вибраного елемента зі списку параметрів, завантаженого в контролер.

Крім того, оскільки подія запускається ще до того, як ngModel дійсно оновиться, ви можете отримати небажані результати, тому кращим способом було б додати тайм-аут:

        $scope.onSelectChange = function () {
            $timeout(function () {
            var filteredData = $scope.productsList.filter(function (response) {
                return response.Id === $scope.data.ProductId;
            })
            console.log(filteredData[0].ProductColor);
            }, 100);
        };