Oceń ciąg w notacji kropkowej, aby uzyskać odpowiednią wartość z obiektu w widoku.

Question

Naprawdę mam nadzieję, że ktoś może mi pomóc z problemem, który miałem kilka razy ostatnio.

Załóżmy, że mam dwa obiekty w AngularJS.

$scope.fields = ['info.name', 'info.category', 'rate.health'] 

$scope.rows = [{ 
    info: { name: "Apple", category: "Fruit"}, 
    rate: { health: 100, ignored: true} 
},{ 
    info: { name: "Orange", category: "Fruit"}, 
    rate: { health: 100, ignored: true} 
},{ 
    info: { name: "Snickers", category: "Sweet"}, 
    rate: { health: 0, ignored: true} 
}] 

bym wtedy chciał wyświetlić tabelę w widoku, który pokazuje tylko pola w $scope.fields. Byłoby to bardzo proste, gdyby stół był płaski i wiem, że mogę go spłaszczyć za pomocą JavaScript, ale musi być sposób, aby to zrobić, przekształcając notację kropki na ścieżkę.

Dodałem JSFiddle wykazać problem mam:

JSFiddle: http://jsfiddle.net/7dyqw4ve/1/

Próbowałem również robić coś jak sugerował poniżej, ale problem jest jej straszna praktyką jest stosowanie funkcje w widoku: Convert JavaScript string in dot notation into an object reference

Jeśli ktoś ma jakieś pomysły, byłbym bardzo wdzięczny.

Answer 1

W tym przypadku można skorzystać z wbudowanego w kanciasty oceniającego narażone za pośrednictwem właściwości $eval sprawie zakresu (not the vanilla eval) ocena dowolnym kątem ekspresji (nie do oceny JavaScript jako eval robi). Angular wewnętrznie używa tego do oceny wyrażenia w zakresie podczas rozwiązywania powiązań.

Przykład: -

{{$eval(field, row)}} 

może zrobić: -

<th ng-repeat="field in fields">{{$eval(field, row)}}</th> 

lub owijać logiczny do sterowania i wystawiać je za pomocą metody z tego zakresu.

<th ng-repeat="field in fields">{{getValue(field, row)}}</th> 

i

$scope.getValue = function(exp, row){ 
    return $scope.$eval(exp, row); 
} 

Demo

Można także użyć $parse (wstrzyknąć $parse) usługi.

$scope.getValue = function(exp, row){ 
    return $parse(exp)(row); 
} 

i

<th ng-repeat="field in fields">{{getValue(field, row)}}</th> 

Demo

Answer 2

niewielkich zmian na PSL's answer który działa również:

<th ng-repeat="field in fields">{{$eval('row.'+field)}}</th> 

W $eval('row.'+field) pierwsze wyniki w row.info.name dla fields[0], na przykład. A następnie wiążące {{row.info.name}} powoduje Apple.

JSFiddle: http://jsfiddle.net/tbmpls/xhon86p7/8/

Ładny, prosty i zrozumiały, tak myślę.

To wydaje że wydajność powinna być grubsza odpowiada prostej {{row.info.name}} wiążącej, ponieważ tworząc ciąg powinien być niezwykle szybkie - ale zainteresowany czyichkolwiek komentarzach dotyczących tego produktu.

(Btw, to działa również wewnątrz NG-repeat gdzie lista jest zagnieżdżony w obiekcie jak:

<span ng-repeat="val in $eval('myobj.'+myPathInDotNotation) track by $index"> 

ale tak jak wszystko NG-repeat, to na pewno warto sprawdzić działanie w tej sprawie)