memilih objek-ng yang dipilih dengan ng-ubah

Diberikan elemen pilih berikut

<select ng-options="size.code as size.name for size in sizes " 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

Apakah ada cara untuk mendapatkan MAGIC_THING agar sama dengan ukuran yang saat ini dipilih, jadi saya memiliki akses ke size.namedan size.codedi controller saya?

size.code mempengaruhi banyak bagian lain dari aplikasi (url gambar, dll), tetapi ketika ng-model item.size.codediperbarui, item.size.nameperlu diperbarui juga untuk pengguna yang menghadapi hal-hal. Saya berasumsi bahwa cara yang benar untuk melakukan ini adalah menangkap peristiwa perubahan dan mengatur nilai-nilai di dalam controller saya, tetapi saya tidak yakin apa yang bisa saya sampaikan ke pembaruan untuk mendapatkan nilai yang tepat.

Jika ini benar-benar cara yang salah untuk melakukannya, saya ingin tahu cara yang benar.

Alih-alih mengatur model-ng ke item.size.code, bagaimana mengaturnya menurut ukuran:

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

Kemudian dalam update()metode Anda , $scope.itemakan diatur ke item yang dipilih saat ini.

Dan kode apa pun yang dibutuhkan item.size.code, bisa mendapatkan properti itu melalui $scope.item.code.

Biola .

Pembaruan berdasarkan info lebih lanjut di komentar:

Gunakan properti $ scope lain untuk model-ng pilih Anda kemudian:

<select ng-options="size as size.name for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>

Pengendali:

$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $scope.selectedItem.name here
   // for other stuff ...
}

Anda juga dapat langsung mendapatkan nilai yang dipilih menggunakan kode berikut

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

Anda juga dapat mencoba ini:

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

Jika jawaban Divyesh Rupawala tidak berfungsi (melewati item saat ini sebagai parameter), maka silakan lihat onChanged()fungsinya di Plunker ini. Itu menggunakan 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>

Jika Anda ingin menulis, nama, id, kelas, banyak, diperlukan, Anda dapat menulis dengan cara ini.

Ini mungkin memberi Anda beberapa ide

.NET C # Lihat Model

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

.NET C # Pengontrol Api Web

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

}

Pengontrol Sudut:

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

Templat Sudut:

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

Anda perlu menggunakan "track by" agar objek dapat dibandingkan dengan benar. Kalau tidak, Angular akan menggunakan cara js asli untuk membandingkan objek.

Jadi kode contoh Anda akan berubah menjadi -

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

Filter AngularJS berhasil untuk saya.

Dengan asumsi code/idini unik , kita bisa menyaring objek tertentu dengan AngularJS ini filterdan bekerja dengan benda-benda sifat yang dipilih. Mempertimbangkan contoh di atas:

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

Sekarang, ada 3 aspek penting untuk ini :

1. ng-init="search.code = item.size.code"- pada h1elemen inisialisasi selectkotak di luar , setel kueri filter ke opsi yang dipilih .

2. ng-change="update(MAGIC_THING); search.code = item.size.code"- ketika Anda mengubah input pilih, kami akan menjalankan satu baris lagi yang akan mengatur kueri "pencarian" ke yang saat ini dipilih item.size.code.

3. filter:search:true- Lulus trueuntuk memfilter untuk mengaktifkan pencocokan ketat .

Itu dia. Jika size.codeini uniqueID , kita akan hanya memiliki satu h1elemen dengan teks size.name.

Saya sudah menguji ini di proyek saya dan berhasil.

Semoga berhasil

Ini adalah cara terbersih untuk mendapatkan nilai dari daftar opsi pilih sudut (selain Id atau Teks). Dengan asumsi Anda memiliki Pilih Produk seperti ini di halaman Anda:

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

Kemudian di Kontroler Anda mengatur fungsi panggilan balik seperti:

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

Cukup Dijelaskan: Karena acara ng-change tidak mengenali item-item opsi dalam pilih, kami menggunakan ngModel untuk menyaring Item yang dipilih dari daftar opsi yang dimuat dalam controller.

Selain itu, karena acara dipecat sebelum ngModel benar-benar diperbarui, Anda mungkin mendapatkan hasil yang tidak diinginkan, Jadi cara yang lebih baik adalah menambahkan batas waktu:

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