AngularJS'de radyo ve onay kutularıyla karmaşık nesnelere nasıl bağlanır?

biz Proje servisi ile maruz projelerin bir dizi var ki:AngularJS'de radyo ve onay kutularıyla karmaşık nesnelere nasıl bağlanır?

Select favorite project: 
%label.radio(ng-repeat="project in Project.query()") 
    %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

Bu id değerine choices.favoriteProject ayarlar: Sonra

{ id: '123', name: 'Yeoman', watchers: '1233', ... } 
{ id: '123', name: 'Grunt', watchers: '4343', ... }

, biz favori projeyi seçmek için bir form var Seçilen projenin Çoğu zaman, biz ilgili nesneye erişmesi gereken, sadece id:

John's favorite project: 
{{Project.get(data.favoriteProject).name}}

Ne aradığım düz nesnenin kendisi değil id için radyolar ve onay kutularını bağlamak için bir yoldur, bu yüzden biz olabilir yerine

John's favorite project: 
{{data.favoriteProject.name}}

yok. Bu, ng-options yoluyla select yönergesi ile mümkündür, ancak bunu radyolar ve onay kutuları ile nasıl yapabiliriz? Mümkünse referanslar yerine eşleme için kimlikleri kullanmayı çok isterim. "Gerçek proje nesnesine data.favoriteProject bağlamak ve eğer eşleşirse referansların yerine (kontrol etmek id kullanın:

burada yazıyor ben

Select favorite project: 
%label.radio(ng-repeat="project in Project.query()") 
    %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}

aradığım bir örnek, netleştirmek için)".

kaynak

2013-01-15 randomguy

tamamen belgelenmemiş gibi görünen ngValue direktifini, keşfettikten sonra benim cevap değiştirdik

[Güncelleme]. Telsiz düğme girişlerinde ngModel değerleri olarak sadece dizeleri yerine nesneleri bağlamanızı sağlar.

<label ng-repeat="project in projects"> 
    <input type="radio" ng-model="data.favoriteProject" 
    ng-value="project">{{project.name}}</input> 
</label> 

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

Bu sadece kimlikleri yerine kontrol başvurular kullanır, ancak ben çoğu durumda düşünüyorum, bu insanlar arıyor olacak budur. 'u sadece ID'lere göre eşleme yapmak istiyorsanız, [Eski Yanıt]'u veya daha da iyisi, sadece bir işlev oluşturun - ör. Kimliğine dayalı bir projeye bakmak için kullanabileceğiniz projectById(projectId).

Ben göstermek için JSFiddle güncelledik: http://jsfiddle.net/BinaryMuse/pj2GR/

[Eski Cevap]

Belki İstediğinizi elde etmek için radyo düğmesi direktifin ng-change niteliğini yararlanabilirler. bu HTML düşünün:

<p>Select your favorite project:</p> 
<label ng-repeat="project in projects"> 
    <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}" 
     ng-change="data.favoriteProject = project"> 
    {{project.name}} 
    </input> 
</label> 

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

Ayrıca ben yalınlık sağlamak için burada yapmadım --Ama örneğin setfavoriteProject(project) için, ng-change içinde bir işlev diyebiliriz. İşte

tekniği göstermek için bir çalışma jsFiddle geçerli: Hayır ng değiştirme ihtiyacı http://jsfiddle.net/BinaryMuse/pj2GR/7/

kaynak

2013-01-16 06:20:43

Teşekkür ederiz! Bu çözümü çok beğendim. Bu basit, yine de düzgün çalışıyor! Şimdi başka çözümler için soruyu açık bırakacağım. Bununla ilgili sorun, verilerin (kimlik) çoğaltılması ve kendimizi değerin ayarlanmasını yönetmemiz gerektiğidir. – randomguy

Neden proje nesnesi yerine projeler [$ index] kullanıyorsunuz? – randomguy

jsFiddle'da bu yeniden kayıt işlemini yaptım, ancak gönderiyi güncellemeyi unuttum. Teşekkürler! –

(ve diğer taraftan böyle inline-kod yazmak için iyi bir uygulama olup olmadığından emin değilim. açısal direktifler kendilerinden çok uzak değildirler.Sadece böyle bir şey yapamaz Neden (aynı zamanda ng tekrarı ile çalışır):

Fiddle: http://jsfiddle.net/JohannesJo/VeZxh/3/

Kodu:

<body ng-app="app"> 
<div ng-controller='controller'> 
<input type = "radio" ng-model = "oSelected" value = "{{aData[0]}}"> 
<input type = "radio" ng-model = "oSelected" value = "{{aData[1]}}"> 
<div>test:  {{oSelected}}</div> 
</div> 
</body> 


app = angular.module('app',[]); 

app.controller('controller', function($scope){ 
$scope.aData = [ 
    {o:1}, 
    {o:2} 
]; 
$scope.oSelected = {}; 
});

Düzenleme: Belki belirtmeliyim bu çalışmadığını Onay kutuları için, değer true veya false olacaktır. Ayrıca, paylaşılan bir model, aynı zamanda kontrol edilen veya işaretlenmemiş tüm onay kutularına yönlendirir.

kaynak

2013-02-28 21:08:58

"ng-value" çözümüne bakın, oldukça esnektir – genuinefafa

AngularJS'de radyo ve onay kutularıyla karmaşık nesnelere nasıl bağlanır?

cevap

İlgili konular