2013-05-01 15 views
5

Bir nesne dizisi için yeniden kullanılabilir girdi bileşeni olan bir angular.js yönergesini yazıyorum. Bu ng-repeat ilkel değerleri kullanmak mümkün olduğuAngularJS: Nesne özellik adının yönergesine geçirilmesi

(bakınız: What is the angularjs way to databind many inputs?), I bileşeninin nesnelerin bir dizi geçmek zorunda: denetleyicisi

I başlatmak:

$scope.theSimpsons = [{ value: 'Bart' }, { value: 'Lisa' }]; 

ve

<div ng-app="App"> 
    <div ng-controller="AppCtrl"> 
     <multi-input items="theSimpsons" /> 
    </div> 
</div> 

direktifi kendisi böyle uygulanır: o zaman HTML dosyasında kullanmak

directive('multiInput', function() { 
return { 
    restrict: 'E', 
    scope: { 
     items: '=items' 
    }, 
    template: 
     '<div>' + 
     '<div ng-repeat="item in items">' + 
     '<input type="text" ng-model="item.value">' + 
     '<a ng-click="items.splice($index, 1)">remove</a>' + 
     '</div>' + 
     '<a ng-click="items.push({value:\'\'})">add</a>' + 
     '</div>' 
}; 
}); 

Her şey yolunda.

Soruma göre: Nesneler value değilse?

Bu yönerge, tesisin (value) sert ismini verir. Ama ne böyle bir dizi istiyorsanız: [{ name: 'Bart' }, { name: 'Lisa' }].

Nesnenin adını, örn. gibi

<multi-input items="names" property="name"></multi-input> 

ve name özelliğine erişmek için yönergede nasılsa kullanmak?

İşte JSFiddle http://jsfiddle.net/napU6/5/ Bu yönergeyi göstermek için hazırladım.

+0

[{value : 'Bart'}, {value: 'Lisa'}]; kuddos –

cevap

4

mülkiyet

<multi-input items="myItems" name="value"></multi-input> 

Yönergesi

app.directive('multiInput', function(){ 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     items:'=', 
     name: '@' 
    }, 
    template:'<div>' 
     + '<div ng-repeat="item in items">' 
     + '<input type="text" ng-model="item[name]">' 
     + '<a ng-click="items.splice($index, 1)">remove</a>' 
     + '</div>' 
     + '<a ng-click="items.push({})">add</a>' 
     + '</div>' 
    } 
}); 

Demo adını geçirmek için başka bir özellik kullanın: Plunker Sorunuz benim sorunum $ scope.theSimpsons = bana yardımcı oldu

+0

teşekkürler benim için çalıştı –

İlgili konular