ng-nesnesinin ng-change ile seçilmesi

Aşağıdaki seçim öğesi verildiğinde

<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'in seçili olan boyuta eşit olmasını sağlamanın bir yolu var mı, bu yüzden denetleyicime size.nameve size.codedenetleyicime erişimim var mı?

size.code, uygulamanın diğer bölümlerinin çoğunu etkiler (resim URL'leri vb.), ancak ng modeli item.size.codegüncellendiğinde, item.size.namekullanıcının karşılaştığı şeyler için de güncellenmesi gerekir. Bunu yapmanın doğru yolunun, change olayını yakalamak ve denetleyicimin içindeki değerleri ayarlamak olduğunu varsayıyorum, ancak uygun değerleri almak için güncellemeye neler geçirebileceğimden emin değilim.

Bu tamamen yanlış bir yol ise, doğru yolu bilmek isterim.

Ng-modelini item.size.code olarak ayarlamak yerine, onu boyut olarak ayarlamaya ne dersiniz:

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

Ardından update()yönteminizde, $scope.itemseçili olan öğeye ayarlanır.

Ve hangi kod gerekli olursa olsun item.size.code, bu özelliği elde edebilirsiniz $scope.item.code.

Keman .

Yorumlarda daha fazla bilgiye dayalı güncelleme :

Seçtiğiniz ng-modeliniz için başka bir $ scope özelliği kullanın:

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

Denetleyici:

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

Ayrıca, aşağıdaki kodu kullanarak seçilen değeri doğrudan alabilirsiniz

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

ayrıca coud bunu deneyin:

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

Divyesh Rupala'nın cevabı işe yaramazsa (geçerli öğeyi parametre olarak onChanged()iletirse ), lütfen bu Plunker'daki işleve bakın . Kullanıyor 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>

Yazmak istiyorsanız, isim, id, sınıf, çoklu, zorunlu, bu şekilde yazabilirsiniz.

Bu size bazı fikirler verebilir

.NET C # Modeli Görüntüle

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

.NET C # Web Api Denetleyicisi

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

}

Açısal Kontrolör:

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

Açısal Şablon:

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

Nesnelerin doğru şekilde karşılaştırılabilmesi için "takip etme" yöntemini kullanmanız gerekir. Aksi takdirde Açısal nesneleri karşılaştırmak için yerel js yolunu kullanır.

Böylece örnek kodunuz -

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

AngularJS Filtresi benim için çalıştı.

Varsayarak code/idbir tek biz angularjs en ile o nesneyi filtre filterve iş seçilen nesnelerin özellikleri. Yukarıdaki örnek göz önüne alındığında:

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

Şimdi, bunun 3 önemli yönü var :

1. ng-init="search.code = item.size.code"- kutunun h1dışında öğe başlatıldığında select, filtre sorgusunu seçilen seçeneğe ayarlayın .

2. ng-change="update(MAGIC_THING); search.code = item.size.code"- seçim girişini değiştirdiğinizde, seçili olan "arama" sorgusunu ayarlayacak bir satır daha çalıştırırız item.size.code.

3. filter:search:true- Sıkı eşleşmeyitrue etkinleştirmek için filtreye geçin .

Bu kadar. Eğer size.codebir uniqueID , sadece bir gerekecek h1metni ile eleman size.name.

Bunu projemde test ettim ve işe yarıyor.

İyi şanslar

Bu, açısal seçim seçenekleri listesinden (Kimlik veya Metin dışında) bir değer almanın en temiz yoludur. Sayfanızda böyle bir Ürün Seçinizin olduğunu varsayarsak:

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

Daha sonra Denetleyicinizde geri arama işlevini şu şekilde ayarlayın:

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

Basitçe Açıklanır: ng-change olayı seçimdeki seçenek öğelerini tanımadığından, ngModel'i, seçilen Öğeyi denetleyiciye yüklenen seçenekler listesinden filtrelemek için kullanıyoruz.

Ayrıca, olay ngModel gerçekten güncellenmeden önce başlatıldığından, istenmeyen sonuçlar alabilirsiniz, Bu nedenle daha iyi bir yol zaman aşımı eklemek olacaktır:

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