AngularJS ng-repeat ile bağımlı açılan menü

İkincisinin ilk seçimdeki seçime bağlı olduğu iki açılan alanım var.AngularJS ng-repeat ile bağımlı açılan menü

İlk aşağı açılan veri bir veri kümesinden gelir. Bir hesap ng-repeat="option in acctList" ile ilişkili sayıyı listeler.

Farklı bir veri kümesine gitmek, eşleşen hesap numaralarını bulmak ve sonra bu hesapla ilişkili Müşterileri göstermek istiyorum. İlk açılan hiçbir şey seçilmediğinde ikinci açılan menüde hiçbir şey gösterilmemelidir. Filter ng-options from ng-options selection Ama açıklanmıştır: SO cevap

angular.module("app", []) 
    .controller("MainCtrl", function($scope) { 
    $scope.test = "This is a test"; 
    $scope.defnum = 1; 
    $scope.acct_info = [ 
     { 
     "Req": "MUST", 
     "DefCom": "1" 
     }, 
     { 
     "Req": "NoMUST", 
     "DefCom": "5" 
     }, 
     { 
     "Req": "MUST", 
     "DefCom": "4" 
     }, 
     { 
     "Req": "MUST", 
     "DefCom": "7" 
     } 
    ]; 

    $scope.cust_info = [ 
     { 
     "Customer": "1", 
     "Com": "1" 
     }, 
     { 
     "Customer": "2", 
     "Com": "1" 
     }, 
     { 
     "Customer": "3", 
     "Com": "4" 
     }, 
     { 
     "Customer": "4", 
     "DefCom": "4" 
     }, 
     { 
     "Customer": "5", 
     "DefCom": "7" 
     }, 
     { 
     "Customer": "6", 
     "DefCom": "7" 
     }, 
     { 
     "Customer": "7", 
     "DefCom": "7" 
     } 
    ]; 
    });

Bu dayanarak ikinci filtrelemeye çalışmak için ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" ekledi: Burada

http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview benim denetleyicisi: İşte

iki damla çıkışlar ile benim plunker olduğunu çalışmıyor. Bununla birlikte, bu eğiticiye bakarak bir bıçak taktım: http://kenhowardpdx.com/blog/2015/05/angular-ngrepeat-and-ngoptions-comparison/

Bununla birlikte, gördüğüm ve tavsiye ettiğim $ watch'ı kullanıyor ve her senaryo için idealden az olan bir if döngüsü yazması gerekiyordu.

ng değişimini kullanmayı denedim, ancak filter veya track by gibi daha kolay bir yol olması gerektiğini düşünüyorum. Ayrıca ng-tekrardan ng-seçeneğine geçmem gerekirse merak ediyorum. Bunu yapmanın kolay bir yolu hakkında herkesin bilgisi var mı?

kaynak

2016-04-08 jenryb

Seçme seçeneklerinizi ng seçenekleriyle bağlamak daha iyidir. Aşağıdaki koduma bakın, umarım yardımcı olur.

<body ng-app="app"> 
<h1>Hello Plunker!</h1> 
<div ng-controller="MainCtrl"> 
    <p>{{ test }}</p> 
    <select ng-model="defcom" ng-options="opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >> 
    </select> 
    <select ng-model="com" ng-options="opt.Customer for opt in cust_info | filter: {Com: defcom.DefCom}: true"> 


    </select> 
</div>

DÜZENLEME: tarak

değiştirilir önce orijinal değerleri tutmak

angular.module("app", []).controller("MainCtrl", function($scope) { 
$scope.test = "This is a test"; 
$scope.acct_info = [ 
. 
. 
. 
(put this below your data definition) 
$scope.defcom = $scope.acct_info[0]; 
var original_defcom = $scope.defcom; 
var original_com = $scope.com;

bakınız plunker: Sen {{option.DefCom}} gibi seçenekler için değer ayarlamak ve ayarlamanız gerekir http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview

kaynak

2016-04-09 00:16:10

Kodunuz çalışır, ancak orijinal Varsayılan seçeneği korumaz:

Sana bir Plunker bu. Varsayılan olarak nasıl ekleneceğini biliyor musunuz? – jenryb

Veri işleme, kontrol cihazınızda yapılmalıdır. Başlangıçta şöyle bir şey yapabilirsiniz: var original_defcom = $ scope.defcom; var original_com = $ scope.com; –

Evet, denetleyicide var, ancak ng-options kullanarak nasıl başvuruda bulunabilirim? – jenryb

seçim için model. Sonra bu modeli sonraki seçim için bir filtre olarak kullanın. Ayrıca, seçimin geçerli değerini ayarlamak için ng-init kullanmanız gerekir. http://plnkr.co/edit/hIyz5pXpsoD2QpR8uo2o?p=preview

kaynak

2016-04-09 00:24:38 Konkko

AngularJS ng-repeat ile bağımlı açılan menü

cevap

İlgili konular